如何使 javascript scrollIntoView 平滑?

本文介绍了如何使 javascript scrollIntoView 平滑?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

In a react app, I have a method being called to bring a particular node into view as follows.

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

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

The scroll happens fine, but the scroll action is a little jerky. How can I make it smooth? I don't see any options which I can give to scrollIntoView for the same.

推荐答案

这可能会有所帮助.

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

From MDN documentation of scrollIntoViewYou can pass in option instead of boolean.

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",
}

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

So you can simply pass parameter like this.

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

参考:https://developer.mozilla.org/en/文档/Web/API/Element/scrollIntoView

这篇关于如何使 javascript scrollIntoView 平滑?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

scrollintoview