vue-scrollactive icon indicating copy to clipboard operation
vue-scrollactive copied to clipboard

Stops working if container it scrolled to the top

Open jsd219 opened this issue 4 years ago • 3 comments

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>

jsd219 avatar Jan 29 '21 13:01 jsd219

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 avatar Feb 26 '21 14:02 ventralnet

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

ventralnet avatar Feb 26 '21 14:02 ventralnet

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.

shahrizal96 avatar May 29 '21 19:05 shahrizal96