如何解决反应自动滚动问题？答案

【问题标题】：How to fix react auto scroll issue?如何解决反应自动滚动问题？
【发布时间】：2022-01-12 12:18:49
【问题描述】：

我正在使用 react 来创建我的项目。我遇到的问题是，如果我滚动到任何页面然后转到另一个页面，我最终会出现在页面顶部的相同位置。我该如何解决这个问题？

【问题讨论】：

它能解决您的问题吗？ stackoverflow.com/questions/33188994/…
请阅读如何在 stackoverflow 上提问并进行相应的编辑。

【解决方案1】：

您可以使用Window.scrollTo或element.scrollIntoView函数来解决问题

 useEffect(() => {
    window.scrollTo(0, 0);
  }, []);

或者如果你想要滚动行为

window.scrollTo({
  top: 0,
  left: 0,
  behavior: 'smooth'
});

但这并不是在每个组件中执行此操作的最佳方式，因此您可以使用自定义挂钩来实现并在任何地方使用它

import react, { useEffect } from "react";

const useTop = function () {
  useEffect(() => {
    window.scrollTo(0, 0);
  }, []);
};

export default useTop;

click to view demo

让我们从element.scrollIntoView 函数和用例中弄清楚如果我们需要滚动到一个元素，但我们不知道视口中元素的高度和宽度，这就是为什么我们只使用 element.scrollIntoView 函数来解决这个问题。我们可以使用element.getBoundingClientReact 函数从视口手动计算元素的高度和宽度，但我们需要大量的样板代码来实现

通过使用自定义，钩子可以在需要时使用滚动事件

const useTop = function () {
      const scroll = (ref) => {
        ref.current.scrollIntoView({ behaviour: "smooth" });
      };
    
      return { scroll };
    };
    
    export default useTop;

click to view demo

【讨论】：

【解决方案2】：

试试这个：

componentDidMount() {
window.scrollTo(0, 0)
}

useEffect(() => {
window.scrollTo(0, 0)
}, [])

【讨论】：