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 mul

Solution 1:

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.