I have an interactive web app with more than one scrollable column. Each column contains a list of items. When a function is called, each scrollable column should scroll to a specific item. It is possible by calling the following for each column:

document.querySelector(`#view_id`).scrollIntoView({ behavior: "auto", block: "nearest", inline: "nearest" });

However, all columns jumping around immediately look terrible from a user-friendliness point of view. I can make columns scroll smoothly by changing the call to be the following:

document.querySelector(`#view_id`).scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });

However, if I call this multiple times, only the last one takes effect. How can I scroll all columns smoothly at the same time?

An Angular-specific solution would also help me.