修复从一个页面传输到另一个页面时的高度偏移

Question

我准备了这个演示，它使用react-spring从一个页面过渡到另一个页面，并且有这个高度偏移。当您向下滚动第1页并单击某个项目时，第 2 页加载得太高。这个问题在webdev中是如何称呼的？我找不到任何关于它的帖子。

Answer 1

您可以在每次页面更改时滚动到顶部。您所要做的就是调用它：

window.scrollTo(0, 0);

更新：

您可以在页面过渡之间以某种方式调用它，当一个页面已经消失而另一个页面尚未呈现时。

或者你可以在最后用平滑滚动来调用它，例如使用 react spring。像这样的东西，我还没有尝试过。(它来自反应弹簧示例(

const props = useSpring({ scroll: 0, from: { scroll: actualPosition } })
return <animated.div scrollTop={props.scroll} />