javascript - 当屏幕达到引用值时如何停止 "scrollIntoView"？

Question

当屏幕到达引用点(在方法滚动内部)时，如何停止滚动到 View ？(当屏幕到达其引用点时，我向上滚动一点，代码自动返回到引用点)

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

如果你想只在section发生变化时运行scroll方法，可以使用react的useEffect钩子(Hook):

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

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