vue-scrollactive
vue-scrollactive copied to clipboard
Stops working if container it scrolled to the top
Thank you for the great plugin!
I am having an issue where everything works as long as the container is NOT at top 0. What I mean is if the container has not been scrolled at all the links will not work but if I scroll the page just by 1 pixel the links will work. I provided a screen capture to demonstrate the issue.
As you can see in the example clip. When I first enter the page the links do not work but as soon as I scroll the page just 1 pixel the links work perfectly, then at the end of the clip you will see that I scroll the page back to the top (beginning) and the links stop working again.
I have tried every possible configuration. Any help would be greatly appreciated.
https://user-images.githubusercontent.com/842940/106282534-56c4dc80-6206-11eb-9ed0-f6e29d0b9a3e.mp4
Here is my current configuration
<scrollactive
scrollContainerSelector=".edit-user-unit-container"
class="team-container"
active-class="active"
:offset="260"
:scrollOffset="160"
:modifyUrl="false">
<a href="#truth" class="unit-icon scrollactive-item v-btn v-btn--flat v-btn--icon v-btn--round theme--dark v-size--default" :class="activecourse[0].course.baseYear">T</a>
<a href="#equip" class="unit-icon scrollactive-item mt-3 v-btn v-btn--flat v-btn--icon v-btn--round theme--dark v-size--default" :class="activecourse[0].course.baseYear">E</a>
<a href="#application" class="unit-icon scrollactive-item mt-3 v-btn v-btn--flat v-btn--icon v-btn--round theme--dark v-size--default" :class="activecourse[0].course.baseYear">A</a>
<a href="#mission" class="unit-icon scrollactive-item mt-3 v-btn v-btn--flat v-btn--icon v-btn--round theme--dark v-size--default" :class="activecourse[0].course.baseYear">M</a>
<a href="#supplication" class="unit-icon scrollactive-item mt-3 v-btn v-btn--flat v-btn--icon v-btn--round theme--dark v-size--default" :class="activecourse[0].course.baseYear">S</a>
</scrollactive>
Hello, I tracked this bug down to ScrollContainer.js
The getDistanceFromTop
method returns this.container.scrollTop || this.container.pageYOffset
. If you are at position 0 and you are spying on the window, then this.container.scrollTop will return undefined which will be returned. If container is a non window element, then this.container.pageYOffset will return undefined resulting in undefined being returned.
undefined
being returned messes up future calculations down the road
If I have time this evening I can patch a submit a merge request, no promises though
Wondering if this issue already fix or not? So far this plugin easy to use just need another touch up and it will be powerful.