Non simultaneous scrolling with two different containers

[GMolini]

So,

I have a component in which I use the scrollTo function. This component has a main div with a dynamic id, and inside it has a div with a fixed id

<div :id="`document_${_uid}`">
 <div id="page-container">

This component gets instanced twice, as it is behind a b-tabs (its in two tabs). Im calling the $scrollTo function with the following options:

    const scrollOptions = {
      container: `#document_${this._uid} #page-container`,
      offset: -20,
    };

Weirdly, the scrolling function works fine for the first instance, but not when I change the tab and try scrolling on the second. Any idea why this is happening?

[rigor789]

It's difficult to troubleshoot without knowing more about your codebase, but my suspicion is that both of your containers use #document_${this._uid} #page-container as the selector, and your non-visible tab probably still exists in the DOM & is being picked up by querySelector.

[GMolini]

yeah, both use #document_${this._uid} #page-container as the selector, but the uid is different for each. If I open the console and I manually enter document.querySelector("#document_123 #page-container") and document.querySelector("#document_122 #page-container") the correct containers are selected, and I can see it in the console. But this does not happen in the scrollTo

[GMolini]

Got it working!

I had to also specify the correct container in the scrollElement.

I was doing

const scrollElement = `div[data-id='${id}']`
this.$scrollTo(scrollElement, 500, scrollOptions);

And those data-ids would repeat in each instance of the component. I have changed that to:

const scrollElement =`#document_${this._uid} #page-container div[data-id='${id}']`
this.$scrollTo(scrollElement, 500, scrollOptions);

I just thought that if you specified the container in the scrollOptions, it would only scroll to children of that container.