如何使javascript scrollIntoView 流畅？答案

【问题标题】：how to make javascript scrollIntoView smooth?如何使javascript scrollIntoView 流畅？
【发布时间】：2017-07-19 02:52:43
【问题描述】：

在 react 应用程序中，我调用了一个方法来将特定节点显示如下。

scrollToQuestionNode(id) {
        const element = document.getElementById(id);
        element.scrollIntoView(false);
}

滚动正常，但滚动动作有点生涩。我怎样才能使它顺利？我没有看到任何可以提供给 scrollIntoView 的选项。

【问题讨论】：

Chrome 现已支持（从 Chrome 61 开始）

标签： javascript css reactjs scroll

【解决方案1】：

在带有滚动条的 div 上使用这个 CSS：

.element-with-the-scrollbar {
  overflow-y: scroll;
  scroll-behavior: smooth;
}

即使您只是这样做，也可以平滑滚动：

elementWithTheScrollbar.scrollTop = 0;

【讨论】：

【解决方案2】：

这可能会有所帮助。

来自 scrollIntoView 的 MDN 文档您可以传入选项而不是布尔值。

scrollIntoViewOptions Optional
A Boolean or an object with the following options:
{
  behavior: "auto"  | "instant" | "smooth",
  block:    "start" | "center" | "end" | "nearest",
  inline:    "start" | "center" | "end" | "nearest",
}

所以你可以像这样简单地传递参数。

scrollToQuestionNode(id) {
  const element = document.getElementById(id);
  element.scrollIntoView({ block: 'end',  behavior: 'smooth' });
}

参考：https://developer.mozilla.org/en/docs/Web/API/Element/scrollIntoView

【讨论】：

非常感谢，但我已经尝试过了。正如您在提到的链接中看到的那样，chrome 不支持 scrollIntoViewOptions （我觉得很奇怪，但这就是现实）
这很奇怪。你在用jquery吗？如果你是那么这很容易，否则可能不得不采取另一种方法。
Chrome 现已支持（从 Chrome 61 开始）
根据 MDN 文档，它无法在 safari 和 IE 浏览器中运行
没错，不幸的是 IE、edge 等不支持平滑行为。

【解决方案3】：

对于多浏览器支持，使用来自here 的smooth-scroll-polyfill

为了便于实现，在polyfill 周围使用这样的wrapper，这样.js polyfill 方法将在加载后初始化：

https://codepen.io/diyifang/embed/MmQyoQ?height=265&theme-id=0&default-tab=js,result&embed-version=2

现在这应该可以跨浏览器工作了：

document.querySelector('.foo').scrollIntoView({
  behavior: 'smooth'
});

【讨论】：