3 回答
TA贡献1853条经验 获得超6个赞
第一个问题是您要向 div 添加 onScroll 事件。如果您在 div 内滚动,则会调用它。但实际上,您正在窗口中滚动。因此,您需要在窗口滚动上附加一个事件侦听器。为此,您可以像这样使用 useEffect 钩子。
import React, { useState, useEffect } from "react";
import "./styles.css";
export default function App() {
const [scrollNumber, updateScrollNumber] = useState(0);
useEffect(() => {
window.addEventListener("scroll", onScroll);
return () => window.removeEventListener("scroll", onScroll);
}, [scrollNumber]);
const onScroll = () => {
console.log("updating the scrollNumber");
updateScrollNumber(scrollNumber + 12);
};
return (
<div className="App" style={{ height: 200000 }}>
{console.log({ scrollNumber })}
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
);
}
TA贡献1773条经验 获得超3个赞
import React, { useState, useEffect } from "react";
import "./styles.css";
export default function App() {
const [scrollNumber, updateScrollNumber] = useState(0);
const onScroll = () => updateScrollNumber((prevScroll) => prevScroll + 12);
useEffect(() => {
document.addEventListener("scroll", onScroll);
return () => window.removeEventListener("scroll", onScroll);
}, []);
return (
<div onScroll={onScroll} className="App" style={{ height: 200000 }}>
{console.log({ scrollNumber })}
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
);
}
TA贡献1799条经验 获得超9个赞
问题是你在 div 中使用了 onSroll 。如果你想能够在 div 内部做到这一点;将其属性溢出设置为滚动。如果你想让它在窗口滚动上工作;添加一个事件监听器。
这应该有效:
import React, { useState, useEffect } from "react";
import "./styles.css";
export default function App() {
const [scrollNumber, updateScrollNumber] = useState(0);
const onScroll = () => updateScrollNumber(scrollNumber + 12);
useEffect(() => {
window.addEventListener("scroll", onScroll)
return () => window.removeEventListener("scroll", onScroll)
})
return (
<div
onScroll={onScroll}
className="App"
style={{ height: 200000}}
>
{console.log({ scrollNumber })}
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
);
}
添加回答
举报