redux 切换页面时如何正确计算React的滚动位置？

dtcbnfnu 于 2023-10-19 发布在 React

关注(0)|答案(1)|浏览(110)

我有一个读取滚动位置并保存到状态的函数（Redux）。有一个问题，在一个页面上的文章后，切换到某一特定的文章出于某种原因，功能捕捉错误的滚动位置。要了解：1200 px（滚动工作正常）->文章切换（在/articles上更改为24 px）

滚动处理功能：

const dispatch = useAppDispatch()
const { pathname } = useLocation()
const onScroll = useCallback(() => {
    const y = window.scrollY
    dispatch(scrollSaveActions.setScrollPosition({
        position: y,
        path: pathname
    }))
    console.log(y, pathname)
}, [dispatch, pathname])

useEffect(() => {
    window.addEventListener('scroll', onScroll)

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

redux

来源：https://stackoverflow.com/questions/77036539/how-to-properly-count-reacts-scroll-position-when-switching-pages

1条答案

按热度按时间

qnakjoqk1#

由于Web应用程序中涉及的各种因素，准确捕获滚动位置可能是一项复杂的任务。虽然我无法在不深入了解应用程序结构的情况下为您的特定场景提供通用的解决方案，但我可以提供一些最佳实践和代码改进，帮助您更可靠地捕获滚动位置。为了避免捕获太多的滚动事件并减少潜在的性能问题，您可以使用Lodash之类的库来消除onScroll函数的抖动。代码如下：

import { debounce } from 'lodash';

const onScroll = useCallback(
  debounce(() => {
    const y = window.scrollY;
    dispatch(scrollSaveActions.setScrollPosition({ position: y, path: pathname }));
  }, 200), // Adjust the debounce delay as needed
  [dispatch, pathname]
);

useEffect(() => {
  window.addEventListener('scroll', onScroll);

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

确保在新文章内容完全加载和呈现之后捕获滚动位置。您可能需要使用事件或回调来了解文章内容何时就绪。

赞(0）回复(0）举报 2023-10-19

我来回答

redux 切换页面时如何正确计算React的滚动位置？

1条答案

相关问题

热门标签

最新问答