Javascript 使用Reactjs获取滚动位置

我使用reactjs并希望使用

单击
事件处理滚动

首先，我用
组件didmount
呈现了帖子列表

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

第三，点击帖子详细信息中的“关闭按钮”
，它将返回以前的帖子列表，但我希望网站将准确滚动到点击帖子的位置

我是这样使用的：

单击事件以查看帖子详细信息：

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

我想获得位置的状态，然后我可以通过“关闭事件”准确地滚动到点击帖子的位置，如下所示：

theposition: e.y // or, e.pageY

或者

您可以像在其他js框架或库中一样在react中使用事件侦听器

componentDidMount() {
  window.addEventListener('scroll', this.listenToScroll)
}

componentWillUnmount() {
  window.removeEventListener('scroll', this.listenToScroll)
}

listenToScroll = () => {
  const winScroll =
    document.body.scrollTop || document.documentElement.scrollTop

  const height =
    document.documentElement.scrollHeight -
    document.documentElement.clientHeight

  const scrolled = winScroll / height

  this.setState({
    theposition: scrolled,
  })
}

要获取当前滚动位置，可以使用

水平滚动量窗口。页面偏移量

垂直滚动量窗口。页面偏移量
这应该可以：

this.setState({
    post: post,
    theposition: window.pageYOffset
});

如果您需要跟踪滚动位置，您可以使用react钩子进行跟踪，这样就可以随时检查滚动位置：

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);
    };
}, []);

在这种情况下，
useffect
的行为将类似于
componentDidMount
，它将在组件渲染后触发，但也会在每次渲染中触发，正如Jared Beach评论的那样：“window.addEventListener足够聪明，可以放弃具有相同参数的后续调用”。确保返回清理功能，类似于您在
componentWillUnmount
中所做的操作，此repo对我帮助很大

你在用什么版本的react？@SungKim我在用最新版本的react非常感谢你。让我试试。非常感谢。这有助于检测滚动时是否到达页面底部。谢谢。很高兴能帮助您@raksheetbhat:）感谢您的解决方案。然而，说
useffect
类似于
componentDidMount
有点误导。它运行每个渲染，而不仅仅是第一个渲染。这段代码仍然有效，因为window.addEventListener足够聪明，可以放弃具有相同参数的后续调用，这些参数通常为window.pageYOffset 0
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);
    };
}, []);

yarn add @n8tb1t/use-scroll-position

import { useScrollPosition } from '@n8tb1t/use-scroll-position'


useScrollPosition(({ prevPos, currPos }) => {
 console.log(currPos.x)
 console.log(currPos.y)
})

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

export default function useWindowPosition() {
  const [scrollPosition, setPosition] = useState(0);
  useLayoutEffect(() => {
    function updatePosition() {
      setPosition(window.pageYOffset);
    }
    window.addEventListener('scroll', updatePosition);
    updatePosition();
    return () => window.removeEventListener('scroll', updatePosition);
  }, []);
  return scrollPosition;
}