scrollContainerSelector not working as expected

[carrey-k]

It does not work when route to another scroll container and route back to the previous scroll active menu(which has already set scrollContainerSelector for a specific scroll container), the previous scroll menu will not work any more.

Fex.

// Nav 1 in the left navigation bar

<scrollactive scrollContainerSelector="#scroll-container1">
  <a href="#nav1-item1" class="scrollactive-item">Nav1 Item1</a>
  <a href="#nav1-item2" class="scrollactive-item">Nav1 Item2</a>
  <a href="#nav1-item3" class="scrollactive-item">Nav1 Item3</a>
</scrollactive>

// Nav 2 in the left navigation bar

<scrollactive scrollContainerSelector="#scroll-container2">
  <a href="#nav2-item1" class="scrollactive-item">Nav2 Item1</a>
  <a href="#nav2-item2" class="scrollactive-item">Nav2 Item2</a>
  <a href="#nav2-item3" class="scrollactive-item">Nav2 Item3</a>
</scrollactive>

// component 1

<div id="scroll-container1" class="over-y-auto" style="max-height: 90vh;">
    <span id="nav1-item1"/>
    .......
    <span id="nav1-item2"/>
    .......
    <span id="nav1-item3/>
    .......
</div>

<script>
    .......
</script>

<style>
    .......
</style>

// component 2

<div id="scroll-container2" class="over-y-auto" style="max-height: 90vh;">
    <span id="nav2-item1"/>
    .......
    <span id="nav2-item2"/>
    .......
    <span id="nav2item3/>
    .......
</div>

<script>
    .......
</script>

<style>
    .......
</style>

Page will route to nav1 by default, it will works properly, however, when I choose the nav2 and route to it, then both nav1 and nav2 will not work any more......

Do you have any idea for it?

Thanks kck

[carrey-k]

Find out the reason:

The scroll container dom element could not be found before the scrollactive creation.

The solution is that make sure the container has already existed in dom before init the scrollactive.