eddiemf / vue-scrollactive

Lightweight and simple to use vue component that highlights menu items as you scroll the page, also scrolling to target section when clicked.
MIT License
542 stars 70 forks source link

Stops working if container it scrolled to the top #91

Open jsd219 opened 3 years ago

jsd219 commented 3 years ago

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>
ventralnet commented 3 years ago

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

ventralnet commented 3 years ago

If I have time this evening I can patch a submit a merge request, no promises though

shahrizal96 commented 3 years ago

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.