我使用 reactjs 并希望处理带有click事件的滚动。
首先，我用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'。
您可以在 React 中使用事件侦听器，就像在其他 js 框架或库中使用一样。
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,
})
}
如果您需要跟踪滚动位置，您可以使用 react hooks 来做到这一点，这样就可以在需要时随时检查滚动位置：
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.
这应该有效：
this.setState({
post: post,
theposition: window.pageYOffset
});
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;
}
获取您可以使用的当前滚动位置
水平滚动量 window.pageXOffset
垂直滚动量 window.pageYOffset