CODEWITHSUNDEEP
javascripthtmlcssgoogle-chrome
Sebastian Olsen
Sebastian Olsen

Reputation: 10888

scrollIntoView() using smooth function on multiple elements in Chrome

element.scrollIntoView with behavior set to smooth is not working as I expect in Chrome. When it is used only on one element in a callstack, it works fine. But if it is used on multiple elements, only the last element will actually scroll.

This works fine in Firefox. Is there a workaround for this in 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>

Upvotes: 7

Views: 2252

Answers (1)

Webber
Webber

Reputation: 5524

As per this draft at drafts.csswg.org, it is not possible to use the smooth function for scrolling multiple elements simultaneously;

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.

Your options are:

  • Scroll the elements one by one using the native smooth function.
  • Use different API or library to animate the elements.
  • Functionally design the thing differently, so they don't need to scroll simultaneously.

Upvotes: 5

Related Questions