scroll bar keeps scrolling down exceeding contents length

[shubhcosmos]

Make sure these boxes are checked before submitting your issue -- thank you!

• [ ] Check FAQ and Caveats
• [ ] Search if there's already one reported in Issues
• [ ] Prepare a JSFiddle reproducing the issue
  • perfect-scrollbar JSFiddle
• [ ] Provide a page or source code where the issue can be checked

issue no 756 this did not fix the issue , I have latest changes but still it does not works

[stephanebrun]

I just have upgraded the version 1.5.0 to 1.5.2 and I don't have the bug anymore

[RG-Ramkumar]

try this fix amd the root cause it works fine

Issue is when you keep scrolling top attribute of ps--rail-y div keeps adding up . So the content height of container div keeps increasing .

in this Fix I have checked that dont increase the top property when top+ innerheight is greater than scroll height

perfect-scrollbar\dist\perfect-scrollbar.esm.js

function updateCss(element, i) {

line 465 onwards

// shubh if(!(element.scrollTop + window.innerHeight >= element.scrollHeight)) { set(i.scrollbarYRail, yRailOffset); }

set(i.scrollbarX, { left: i.scrollbarXLeft, width: i.scrollbarXWidth - i.railBorderXWidth, });

set(i.scrollbarY, { top: i.scrollbarYTop, height: i.scrollbarYHeight - i.railBorderYWidth, });

can you please mention about 'i' haven't get that

[RG-Ramkumar]

I found my container has border-top 1px, problem solved after removing it. Thanks! lack. its working.

[elfwine]

I found that when the height has a decimal value, infinite scrolling occurred. It might help for others who have dynamically height calculation.

[de-don]

Still actual issue for containers with border even if box-sizing: border-box.

In 1.4.0 it works as expected

[jmynes]

This seems to work, though if your content is uneven, you may have to scroll one extra tick to catch the last bit of content, which may feel unnatural at first

<PerfectScrollbar
  options={{ wheelPropagation: false }}
>

https://perfectscrollbar.com/options.html

Notably, the documentation says this is false by default, but it's set to true by default for me, using: "react-perfect-scrollbar": "^1.5.8",

[helloroot-maker]

SOLUTION:

I modified the included js file: in my case perfect-scrollbar.js from dist folder.

1- I added a new integer variable member 'maxScroll' in the perfect-scrollbar constructor function:

var PerfectScrollbar = function PerfectScrollbar(element, userSettings) { ... ... this.maxScroll = 0; // BUG-FIX: Infinite scrolling BUG, avoid scrolling after the last item // (used in updateGeometry(i) function) ... ... }

2- Then modified the updateGeometry(i) function TO FIX the BUG:

function updateGeometry(i) {

var element = i.element;

/* ----- BUG-FIX BEGIN: Infinite scrolling BUG, avoid scrolling after the last item ----- ***/

if (!i.settings.wheelPropagation) { // This BUG doesn't occur if "wheelPropagation" option is activated (= true).

    // 1- Reinitialize the maximum scroll height value when items are added dynamically in the container to scroll
    if ((i.maxScroll !== 0) && (element.scrollTop + element.offsetHeight < element.scrollHeight)) {
      i.maxScroll = 0;
    }

    // 2- Set the maximum scroll height value when we reach the last item of the container
    if ((element.scrollTop + element.offsetHeight >= element.scrollHeight) && i.maxScroll === 0) {
      i.maxScroll = element.scrollTop;
    }

    // 3- Stop scrolling down when we reach the last item of the container
    if ((i.maxScroll !== 0) && (element.scrollTop > i.maxScroll)) {
      return;
    }

}

/* ----- BUG-FIX END ----- ***/

...

...

}

That's it!

I hope this helps.