实现原理
首先使用 useState 定义一个 y，用来保存最新的的 window.scrollY，然后使用window.addEventListener("scroll", handleScroll)监听页面的滚动滑动，当页面滑动时调用handleScroll，在 handleScroll里面处理你的逻辑即可，逻辑处理完以后通过setY(window.scrollY) 赋值最新的值。
useEffect组件挂载时执行~~~
完整示例
这是一个 HTML 单页面，为了更好的展示实现功能，保存代码成 html 文件，用浏览器打开即可查看效果。
<!DOCTYPE html>
<html>
<head>
<!-- react 依赖 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<!-- babel 翻译 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.22.5/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel" data-plugins="transform-modules-umd">
// 单页面 html 原因，需要这样使用，不是单页面直接 import 即可
// import {useCallback, useEffect, useState} from "react";
const useState = React.useState
const useCallback = React.useCallback
const useEffect = React.useEffect
const MyApp = () => {
const [y, setY] = useState(window.scrollY);
const handleScroll = useCallback(e => {
const window = e.currentTarget;
if (y > window.scrollY) {
console.log("scrolling up");
} else if (y < window.scrollY) {
console.log("scrolling down");
}
setY(window.scrollY);
}, [y]
);
useEffect(() => {
setY(window.scrollY);
window.addEventListener("scroll", handleScroll);
return () => {
window.removeEventListener("scroll", handleScroll);
};
}, [handleScroll]);
return (
<div style={{ background: "red", height: "3000px", width: "200px" }}>
xxx
</div>
)
}
const container = document.getElementById('root')
const root = ReactDOM.createRoot(container)
root.render(<MyApp />)
</script>
</body>
</html>