React 上未检测到滚动位置

Question

我需要检索滚动位置以便能够在用户向下滚动时删除导航栏，当前是 st 变量

let st = window.pageYOffset || document.documentElement.scrollTop;

即使我向下滚动，

也始终为 0。

这里是成分：

import "../App.css";
import { useEffect, useRef} from "react";

function NavBar({ sectionLists }){
    const Nav = useRef(null);
    const lastScrollTop = useRef(0);
    const HandleScrollInto = (name) => {
        sectionLists[name].current.scrollIntoView({ behavior: 'smooth' })
    }

    useEffect(() => {
        const onScroll = () => {
            let st = window.pageYOffset || document.documentElement.scrollTop;

            console.log(st)
            if (st > lastScrollTop.current) {
                console.log('Scrolling DOWN');
            } else if (st < lastScrollTop.current) {
                console.log('Scrolling UP');
            }
            lastScrollTop.current = st;
        };

        window.addEventListener('scroll', onScroll, true);

        return () => {
            window.removeEventListener('scroll', onScroll, true);
        };
    }, []);


    return(
        <>
            <div className={"main-container"} id={"navId"} ref={Nav}>
            <div className={"nav-container"}>
                <div className={"name"}>
                    <h1 className={"hb"}>HB</h1>
                    <h4 className={"web"}>Web developer<br/>Fullstack</h4>
                </div>

                <h2 className={"hamza"} onClick={() => HandleScrollInto('Bio')}>Hamza Benkejjane</h2>

                <div className={"ul-list"}>
                    <ul>
                        <li onClick={() => HandleScrollInto('Home')}>HOME</li>
                        <li onClick={() => HandleScrollInto('Project')} >PROJECT</li>
                        <li onClick={() => HandleScrollInto('Inspiration')} >INSPIRATIONS</li>
                        <li onClick={() => HandleScrollInto('Contact')}>CONTACT</li>
                    </ul>
                </div>
            </div>
            </div>
        </>
    )
}

export default NavBar;

逻辑是当我在事件中调用 onScroll 函数在页面上滚动时，事件有效，但实际上滚动位置始终保持在 0

Answer 1

let st = window.pageYOffset || document.documentElement.scrollTop;

上面的表达式给出了布尔结果，因为您应用了

||

运算符。您应该使用任何一个（

window.pageYOffset

或

document.documentElement.scrollTop

）来从顶部获取位置。我建议您使用

window.pageYOffset

，因为它代表相对于视口顶部的滚动位置，并且它更好的跨浏览器支持。