使用 Reactjs 获取滚动位置

我使用reactjs并想要处理滚动click event.

首先，我呈现了帖子列表componentDidMount.

其次，通过click event在列表中的每个帖子上，它将显示帖子详细信息并滚动到顶部（因为我将帖子详细信息放在页面的顶部位置）。

第三，通过点击"close button"在帖子详细信息中，它将返回以前的帖子列表，但我希望网站将滚动到恰好到单击帖子的位置。

我这样使用：

点击事件查看帖子详情：

inSingle = (post, e) => {
   this.setState({
        post: post,
        theposition: //How to get it here?
   });
   window.scrollTo(0, 0);
}

我想要得到的状态theposition然后我可以精确滚动到点击帖子的位置'Close event'.

如果您需要跟踪滚动位置，可以使用反应钩子来执行此操作，这样就可以在需要时随时检查滚动位置：

import React, { useState, useEffect } from 'react';

...
// inside component:

const [scrollPosition, setScrollPosition] = useState(0);
const handleScroll = () => {
    const position = window.pageYOffset;
    setScrollPosition(position);
};

useEffect(() => {
    window.addEventListener('scroll', handleScroll, { passive: true });

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

在这种情况下useEffect将行为类似于componentDidMount，一旦组件渲染完毕，它就会触发，而且在每次渲染中都会触发，正如 Jared Beach 所评论的那样：“window.addEventListener 足够聪明，可以丢弃具有相同参数的后续调用”。 。确保返回清理函数，类似于您在componentWillUnmount.