Bug on resize after having reached the bottom of the page
See original GitHub issueHi there,
I’ve noticed a small bug if you resize the window after having reached the bottom of the page. The transform value seems to exceed the new instance limit. It’s getting back to a normal behavior after scrolling again.
To reproduce the bug, simply scroll to the bottom of the page and then resize the window: https://locomotivemtl.github.io/locomotive-scroll/
Tested on latests Chrome (v78) and Firefox (v70) on Windows.
I’ve fixed this issue by updating the updateScroll method so that the the instance delta y property can’t exceed the instance limit and by then calling transform to reset the position in case it happens, however I’ve not dug deeply enough in the code to be sure it’s not just a dirty hack:
key: "updateScroll",
value: function updateScroll(e) {
if (this.isScrolling || this.isDraggingScrollbar) {
this.instance.scroll.y = lerp(this.instance.scroll.y, this.instance.delta.y, this.inertia * this.inertiaRatio);
} else {
// fix to avoid the limit to be exceeded on resize
if(this.instance.delta.y > this.instance.limit) {
this.instance.delta.y = this.instance.limit;
// force transform to the max position (dirty hack?!)
this.transform(this.el, this.instance.scroll.x, -this.instance.delta.y, 0);
}
this.instance.scroll.y = this.instance.delta.y;
}
}
(Edit: I was using v3.1.5, things may have changed by then)
Thank you very much folks for the awesome work!
Issue Analytics
- State:
- Created 4 years ago
- Reactions:2
- Comments:5
Top GitHub Comments
Guys if anyone can’t understand what they written over above… And if you are using react or gatsby just like me, then doing
overflow: hidden; to the body will fix the issue of this.
It work nice for me, hope this will help you guys also…
Can confirm to this issue, when resizing, the scroll content goes out of view until you scroll manually, then it returns to normal.
Edit: tried the hack above, but it didn’t work for me.