如何在没有动画的情况下滚动到

Question

所以我使用了来自lions-mark的优秀插件，它允许轻而易举地滚动到任何位置。我主要使用它来在页面刷新时将用户保持在他当前的滚动位置（不要问，我的是一个在某些情况下具有自动刷新功能的传统游戏网站）

所以我将当前滚动位置存储到 localstorage onwindow.onBeforeUnload并使用该值在页面加载后滚动到上一个位置。

$('content-grid').scrollTo(offsetBeforeReload);

这是有效的，但是我想在没有动画滚动的情况下“跳”到那个位置。我不想使用锚点，因为我已经有了这个可以正常工作的 scrollTo 代码，我想做的就是去掉 scrollTo 动画，让它看起来好像页面“锚定”到那个位置。

非常感谢任何建议/解决方案！

Answer 1

这是我需要的：

window.scrollTo({ top:50, left:0, behavior: "instant"})

Answer 2

我能够实现这一点的方式（在我的例子中：在通过Vue Router转换到新视图时抑制滚动动画到顶部：

  mounted() {
    document.documentElement.style.scrollBehavior = 'auto';
    setTimeout(() => window.scrollTo(0, 0), 5);
    setTimeout(() => document.documentElement.style.scrollBehavior = 'smooth', 5);
  }

这允许您更改节点style的属性html...从 切换scroll到 来auto停止它，然后scroll在滚动完成后返回到 。这setTimeout()实际上很重要，否则切换auto实际上不会生效。

请注意，即使您html最初在 css 中将 set 设置为平滑滚动，这仍然有效：

html {
    scroll-behavior: smooth;
}

我在 MacOS（Big Sur）上的 Chrome 和 Firefox 上尝试过这个，它们似乎有效。

这也应该可以在不使用 Vue.js 的情况下工作。

Answer 3

只需使用window.scrollTo. 这将直接跳转到没有动画的位置。

var xPosition = 0;
var yPosition = 1000;
window.scrollTo(xPosition, yPosition);

Answer 4

您可以设置应立即滚动到元素的duration选项。0

$('content-grid').scrollTo(offsetBeforeReload, {duration:0});

这是来自 lions-mark 网站的演示，已更新为使用零持续时间：JSFiddle