Perfect-scrollbar: Scrolling happens even after reaching bottom

[Gurkirat2210]

I'm able to scroll down even after reaching the bottom of container. Scroll keeps moving down while white space keeps on showing below the actual content. I have attached snapshot.

The container's height is fixed to 350px while content height is about 2800px, but scroll can move to any length until user keeps scrolling.

This works fine with less content, like 6-700 px. but issue happens when content loaded is is too long. Also content is loaded dynamically. I've already tried calling update() after loading content.

Any thoughts?

[statyan]

I think I faced almost the same issue. How to reproduce:

1. Go to the perfect-scroll demo page: http://utatti.github.io/perfect-scrollbar/ with latest Chrome
2. Zoom to 150%
3. Set height = '400.65px' instead of '400px' to <div id="demo" class="ps ps--active-x ps--active-y">
4. Scroll to the bottom and continue scrolling - scroll becomes infinite.

Seems like issue happent because of incorrect rounding of thumb size calculation. element.scrollTop becomes fractional and size of thumb sometimes grows on 1px (or top of it becomes on 1px greated than should be) and increase size of content.

[shubhcosmos]

I'm able to scroll down even after reaching the bottom of container. Scroll keeps moving down while white space keeps on showing below the actual content. I have attached snapshot.

The container's height is fixed to 350px while content height is about 2800px, but scroll can move to any length until user keeps scrolling.

This works fine with less content, like 6-700 px. but issue happens when content loaded is is too long. Also content is loaded dynamically. I've already tried calling update() after loading content.

Any thoughts?

@Gurkirat2210 Gurkirat2210 How did you fix it I am facing the same issue . any leads will be very helpful

[shubhcosmos]

I think I faced almost the same issue. How to reproduce:

1. Go to the perfect-scroll demo page: http://utatti.github.io/perfect-scrollbar/ with latest Chrome
2. Zoom to 150%
3. Set height = '400.65px' instead of '400px' to <div id="demo" class="ps ps--active-x ps--active-y">
4. Scroll to the bottom and continue scrolling - scroll becomes infinite.

Seems like issue happent because of incorrect rounding of thumb size calculation. element.scrollTop becomes fractional and size of thumb sometimes grows on 1px (or top of it becomes on 1px greated than should be) and increase size of content.

@utatti utatti @statyan
Hi , this did not fixed the issue . Do you have any other solution . Thanks in advance

[mohamed-badaoui]

Hi @shubhcosmos,

I had this issue with perfect-scrollbar, and end up to change for another scrollbar lib called simplebar.
https://www.npmtrends.com/perfect-scrollbar-vs-simplebar

Hope this help you.

[kamaladenalhomsi]

I have the same issue, can someone please help
something to mention, the issue get solved by setting a fixed height in pixels (originally I set the height to 19vh)
update 1:
the issue disappear when using max-height instead of height