如何使javascript scrollIntoView平滑？

在react应用程序中，我调用了一个方法，将特定节点带入视图，如下所示

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

滚动发生得很好，但滚动动作有点不稳定。我怎样才能使它光滑？我看不到我可以为scrollIntoView提供的任何选项。

这可能会有所帮助

来自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' });
}

---

参考资料：

要获得多浏览器支持，请使用平滑滚动多边形填充

为了便于实现，请在

polyfill

周围使用这样的

wrapper

，以便在加载后将

.js

polyfill

方法序列化：

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

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

---

谢谢你，但我已经试过了。正如您在前面提到的链接中看到的，chrome不支持scrollIntoViewOptions（我觉得很奇怪，但事实就是这样），这很奇怪。您正在使用jquery吗？如果你是，那么这很容易，否则可能不得不采取另一种方法。它现在由Chrome（来自Chrome 61）支持。根据MDN文档，它在safari和IE浏览器中不起作用。很遗憾，IE、edge等不支持平滑行为。它现在由Chrome（来自Chrome 61）支持