javascript - scrollIntoView() 在 Chrome 中的多个元素上使用平滑函数

Question

行为设置为 smooth 的

element.scrollIntoView 在 Chrome 中无法正常工作。当它仅用于调用堆栈中的一个元素时，它工作正常。但如果它用于多个元素，只有最后一个元素会真正滚动。

这在 Firefox 中运行良好。 Chrome 中是否有解决此问题的方法？

const $ = (s) => document.querySelector(s)
const $$ = (s) => document.querySelectorAll(s)

const container = $(".container")

for (let i = 0; i < 2; i++) {
  document.body.appendChild(container.cloneNode(true))
}

function scrollIntoView(behavior) {
  for (const element of $$(".reveal")) {
    element.scrollIntoView({
      behavior,
      block: "end"
    })
  }
}

$(".instant").addEventListener("click", () => scrollIntoView("instant"))

$(".smooth").addEventListener("click", () => scrollIntoView("smooth"))

$(".reset").addEventListener("click", () => {
  for (const element of $$(".container")) {
    element.scrollTo(0, 0)
  }
})

.container {
  max-height: calc(33vh - 12px);
  overflow-y: auto;
}

.reveal {
  color: red;
}

<button class="instant">
Instant
</button>
<button class="smooth">
Smooth
</button>
<button class="reset">
Reset
</button>
<div class="container">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rhoncus elementum quam. Donec quis est volutpat, dapibus nisl at, consequat turpis. Quisque convallis nunc faucibus eros egestas, in faucibus neque fringilla. Duis aliquam, metus tempor dignissim
  vestibulum, nulla elit lacinia lacus, vitae pulvinar augue diam et turpis. Aenean a velit sed elit dictum fringilla ut eu augue. Vestibulum hendrerit dolor mauris. Proin quis lacus a turpis posuere maximus. Sed lacus mauris, feugiat a iaculis porta,
  lacinia vel eros. Integer tempor id tortor vitae fermentum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam lobortis efficitur massa, eu elementum nulla eleifend ut. Quisque non erat iaculis, ornare erat non, interdum sapien. Suspendisse
  sit amet interdum nisl, eu maximus libero. Fusce nisi nulla, iaculis eu est a, mattis tincidunt sem. Pellentesque non orci dapibus, dignissim ipsum a, finibus metus. Quisque placerat porta neque, eget finibus lectus tempus sed. Cras non gravida urna.
  Morbi pretium mauris nec erat consectetur, vitae convallis lacus consectetur. Nam venenatis diam magna, sed venenatis nisl placerat viverra. Integer et mi pellentesque risus consectetur ultrices. Phasellus iaculis risus elementum, vulputate est sed,
  consectetur diam. Phasellus lobortis felis purus, sit amet mattis elit pharetra ac. Nulla at viverra leo. Maecenas a condimentum magna. Maecenas porta tellus sit amet elit fermentum tincidunt. Donec ultricies blandit enim id mollis. Sed rutrum risus
  sit amet posuere varius. Suspendisse suscipit maximus ligula eget egestas. Nullam lorem neque, viverra in sollicitudin ac, cursus nec purus. Aliquam placerat, arcu sit amet tincidunt consequat, ex est lacinia tellus, ac mattis nisl sapien at enim. Cras
  lacinia libero eu eleifend sodales. Praesent a erat convallis, venenatis dui ut, semper sem. Vivamus tincidunt tempor neque, at congue lacus tincidunt et. Praesent consectetur, massa tristique laoreet sollicitudin, erat diam mattis nibh, nec consequat
  mauris odio ut est. Integer pharetra arcu at finibus congue. Proin pellentesque fringilla blandit. Suspendisse egestas interdum nisl. Nulla facilisi. Quisque dapibus odio risus. Donec non orci dapibus risus pellentesque cursus vestibulum vel arcu. Proin
  volutpat tellus sed elit auctor, sit amet tincidunt ante cursus. Donec faucibus sit amet libero sit amet lobortis. Pellentesque posuere nisl vitae pharetra vestibulum. Mauris et lobortis libero, vel facilisis metus. Duis eu venenatis dui. Fusce gravida
  nibh odio, quis ullamcorper nibh rutrum sed. In dapibus, nulla non auctor egestas, nisi augue venenatis quam, et finibus lorem dui non turpis. Nullam arcu diam, mattis at erat ac, viverra lobortis felis. In in nisi magna. Ut ut ultrices velit, quis
  vehicula libero. Proin dictum metus vel ante lobortis, in placerat magna ornare. Etiam vulputate metus felis, sed fringilla magna convallis vitae. Curabitur non pulvinar ante, eget molestie nibh. Quisque facilisis, diam sed dapibus blandit, ex urna
  vulputate est, non auctor risus dui nec augue. Donec pretium laoreet est, tempor faucibus tortor laoreet ac.
  <span class="reveal">Revealed!</span>
</div>

Answer 1

根据这个draft在 drafts.c​​sswg.org，无法使用平滑功能同时滚动多个元素；

When a user agent is to perform a scroll of a scrolling box box, to a given position position, an associated element element and optionally a scroll behavior behavior (which is "auto" if omitted), the following steps must be run:

1. Abort any ongoing smooth scroll for box.
2. If the user agent honors the scroll-behavior property and one of the following are true:
   • behavior is "auto" and element is not null and its computed value of the scroll-behavior property is smooth
   • behavior is smooth

...then perform a smooth scroll of box to position. Otherwise, perform an instant scroll of box to position.

您的选择是:

• 使用 native 平滑功能逐一滚动元素。
• 使用不同的 API 或库为元素设置动画。
• 在功能上设计不同的东西，这样他们就不需要同时滚动。