如何使用scrollIntoView()同时平滑滚动两个元素？

scrollIntoView()是一个用于将元素滚动到可见区域的方法。然而，它默认是瞬间滚动到目标元素位置，而不是平滑滚动。要实现平滑滚动两个元素，可以使用以下步骤：

首先，获取需要滚动到的两个元素的引用。可以使用getElementById()、querySelector()等方法获取元素的引用。
创建一个滚动容器，可以是一个div元素，用于包裹需要滚动的元素。
使用CSS样式将滚动容器设置为可滚动，并设置滚动行为为平滑滚动。例如，可以设置滚动容器的overflow属性为scroll，以及scroll-behavior属性为smooth。
使用scrollIntoView()方法将第一个元素滚动到可见区域。可以传递一个配置对象作为参数，将behavior属性设置为smooth，以实现平滑滚动效果。
在第一个元素滚动完成后，使用setTimeout()函数设置一个延迟，然后再次使用scrollIntoView()方法将第二个元素滚动到可见区域。同样，可以传递一个配置对象，将behavior属性设置为smooth。

以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    .scroll-container {
      overflow: scroll;
      scroll-behavior: smooth;
      height: 200px;
    }
  </style>
</head>
<body>
  <div class="scroll-container">
    <div id="element1">Element 1</div>
    <div id="element2">Element 2</div>
  </div>

  <script>
    const element1 = document.getElementById('element1');
    const element2 = document.getElementById('element2');

    element1.scrollIntoView({ behavior: 'smooth' });

    setTimeout(() => {
      element2.scrollIntoView({ behavior: 'smooth' });
    }, 1000);
  </script>
</body>
</html>

在这个示例中，我们创建了一个滚动容器div，并将两个需要滚动的元素放置在其中。通过设置滚动容器的overflow属性为scroll，以及scroll-behavior属性为smooth，实现了平滑滚动的效果。

然后，我们使用scrollIntoView()方法将第一个元素滚动到可见区域，并传递了一个配置对象，将behavior属性设置为smooth。

接着，使用setTimeout()函数设置了一个延迟，然后再次使用scrollIntoView()方法将第二个元素滚动到可见区域，同样传递了一个配置对象，将behavior属性设置为smooth。

这样，就实现了同时平滑滚动两个元素的效果。

腾讯云相关产品和产品介绍链接地址：