当屏幕到达参考时，如何停止"滚动到视图"？

Question

当屏幕到达引用(滚动方法内部(时，如何停止滚动进入视图？(当屏幕达到其参考时，我向上滚动一点，代码atomatcaly回到参考(

interface Props {
    section: number
}
const Home = ({ section }: Props) => {
    const sectionRef1: any = useRef(React.createRef());
    const sectionRef2: any = useRef(React.createRef());
    const scroll = (ref: any) => {
        ref.current.scrollIntoView({
            behavior: 'smooth',
            block: 'start',
        });
    };
    function scrollToSection(section: number) {
        if (section === 1) {
            scroll(sectionRef1);
        }
        else if (section === 2) {
            scroll(sectionRef2);
        }
        else if (section === 3) {
            //TODO: active button
        }
    }
    scrollToSection(section);
    return (
        <div>
            <div ref={sectionRef1} />
            <Carrousel></Carrousel>
            <div ref={sectionRef2} className="margin_top_portrait" />
            <Portrait></Portrait>
        </div>
    );
}
export default Home;

恐怕这个功能永远不会完成。。。而且它是异步的。

提前感谢您的帮助。

Answer 1

如果只想在节更改时运行滚动方法，可以使用react:的useEffect挂钩

useEffect(() => {
    scrollToSection(section);
}, [section]);

这将在第一次安装组件时以及每次section道具更改时执行scrollToSection方法。