Javascript 在某些用户滚动[反应]后，强制向下滚动到特定点

一旦用户向下滚动到页面上的某个特定点，我希望javascript启动并强制滚动到该点下方的某个特定点

例如，如果我有两个div，一个放在另一个上面，一旦用户在第一个div中滚动了50%，我希望一些动画开始，并将它们向下滚动到下一个div的起点。

---

有人知道如何使用React来完成此操作吗？我发现很多软件包允许我通过让用户单击按钮来实现这一点，但我希望它能够自动响应他们的滚动。

您可以使用来检测可见元素的百分比，并触发回调，从而在所需元素上设置scrolltop。或者使用

元素.scrollIntoView（{behavior:“smooth”}）

如果您想设置滚动动画。

您可以使用CSS

滚动捕捉功能来执行您想要的操作。
设置起来真的很容易：）

下面是一个教程：

下面是一个很好的短片，直接演示了这一点：
我认为在React 16中，最简单的方法是使用一个交叉点观测者（如
React intersection observer
）和几个参考点（或者您可以使用一些专用软件包）。
代码可能是以下几行代码之一：

import React, {useRef} from 'react';
import { useInView } from 'react-intersection-observer';

export default props => {
    const refToScroll = React.useRef();
    // be sure to check out all the options available
    const [refFromScroll, refFromScrollVisible] = useInView();

    useEffect(() => {
        // as soon as refFromScroll is visible, your scroll logic fires
        if(refFromScrollVisible && refToScroll.current) {
            // add more options as you like
            refToScroll.current.scrollIntoview({behavior: "smooth"})
        }
    }, [refFromScrollVisible, refToScroll.current]);

    return (<div>
        {/*as soon as it is visible your scrolling logic will be executed*/}
        <div ref={refFromScroll} />
        {/*your other components*/}
        {/*scroll to this div*/}
        <div ref={refToScroll} />    
    </div>)
}

import React，{useRef}来自“React”；
从“react intersection observer”导入{useInView}；
导出默认道具=>{
const reftoscorl=React.useRef（）；
//确保查看所有可用选项
常量[refFromScroll，refFromScrollVisible]=useInView（）；
useffect（（）=>{
//只要refFromScroll可见，就会触发滚动逻辑
if（refFromScrollVisible&&refToScroll.current）{
//根据需要添加更多选项
refToScroll.current.scrollIntoview（{behavior:“smooth”}）
}
}，[refFromScrollVisible，refToScroll.current]）；
返回(
{/*一旦显示，您的滚动逻辑将立即执行*/}
{/*您的其他组件*/}
{/*滚动到此div*/}
)
}

您可以使用任何其他类似的包（
react use visibility
），甚至可以编写自己的钩子或组件来调用
元素。getBoundingClientRect（）
，检测其属性（
top
，
left
，
bottom
，
right
）为正值且小于windows
高度
和
宽度
（假设您希望检查它是否可见，则完全可以使用另一个元素作为可见性边界），并在其可见时触发回调或填充标志（请参阅以获取参考）。就我个人而言，我最喜欢
react intersection observer
，因为它对react进行了调优，而且在这之上还可以定制