Question

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

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

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

Answer 1

这可能会有所帮助。

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

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

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

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

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

Answer 2

要获得多浏览器支持，请从此处使用smoots滚动polyfill：

https://github.com/iamdustan/smoothscroll

为了易于实现，在polyfill周围使用这样的包装器，以便在加载后将.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'
});

Answer 3

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

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

即使你只是这样做，这也能平滑滚动：

elementWithTheScrollbar.scrollTop = 0;

如何使javascript scrollIntoView顺利进行？

3 个答案: