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

[kfeng0806]

Since 1.4.0 update to 1.5.0 i also facing this problem

[GuichiZhao]

@shubhcosmos Will it be fixed in future release?

[shubhcosmos]

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, });

[statyan]

The root cause of the issue it changes in update-geometry: This code

i.containerWidth = element.clientWidth;
i.containerHeight = element.clientHeight;

was replaced with this one:

const rect = element.getBoundingClientRect();
i.containerWidth = Math.ceil(rect.width);
i.containerHeight = Math.ceil(rect.height);

getBoundingClientRect does not take into account borders on the container element. So if you have the borders - I'll get the bug with infinite scroll.

[kfeng0806]

The root cause of the issue it changes in update-geometry: This code

i.containerWidth = element.clientWidth;
i.containerHeight = element.clientHeight;

was replaced with this one:

const rect = element.getBoundingClientRect();
i.containerWidth = Math.ceil(rect.width);
i.containerHeight = Math.ceil(rect.height);

getBoundingClientRect does not take into account borders on the container element. So if you have the borders - I'll get the bug with infinite scroll.

I have issue with horizontal scroll on touch device but container without border, it scroll exceed the container width

[dexcell]

I had to rollback to 1.4.0 because of this issue.

[mattonit]

what are the steps to reproduce this issue?

[Dev1lDragon]

here representation of bug perfect scrolbar bug 1.5.0

also recreated on X

[kfeng0806]

it probably cause by rails, rail-y on mouse scroll and rail-x happend on touch device

[supersnager]

Please try my fix mdbootstrap/Tailwind-Elements#934 for this issue

[supersnager]

Just added one more fix, after testing in some different cases.

[pushpendersingh97]

This issue is easily reproducible in IE, with resolution of 1366 *768. When a container have a height of 456 then it is going continuously downwards.

[supersnager]

@pushpender98 have you tested it with my fix?

[pushpendersingh97]

@supersnager yes it is still coming when the parent div have height in points.

[shubhcosmos]

Try my fix above and the reason i debugged it , its tested and working fine on dev and prod

[kfeng0806]

@supersnager thanks for fix, i tried your fix on master but the issue still exists

[Dev1lDragon]

@kfeng0806 for fix in master you need to rebuild dist files

[kfeng0806]

@Dev1lDragon Thanks for the tips, after rebuild it proves the fix works :) And thanks @supersnager again, you are life saver 👍

[pushpendersingh97]

I have tried it at my end, and this issue is still coming in the IE. Please have a look upon it.

[supersnager]

@pushpender98 Please provide an example on jsfiddle or as github project, i will try to fix it.

[pushpendersingh97]

@supersnager , This issue is occuring in IE only at some specific version. So not able to reproduce on jsfiddle.

[supersnager]

@pushpender98 Sorry, but i can't help if it's not possible to reproduce this issue

[Dev1lDragon]

@pushpender98 try to find in your compiled js file Math.ceil and after that Math.round if you find first you don't compiled js to work.

[totszwai]

This happens even with v1.3.0, @dexcell I doubt rolling back to 1.4.0 would fix it? Unless this is yet another regression issue after 1.4.0?

[supersnager]

Is it possible to make stable release with this fix?

[Borlu]

If you are adding border to div element like me, please you don't do it. I don't know root cause but when you are remove border outside of div element the problem is solving.

[fnfilho]

I also have this issue. Happening on Chrome 81. Outside div does not have border, nor inside one.

[supersnager]

I also have this issue. Happening on Chrome 81. Outside div does not have border, nor inside one.

@fnfilho Problem exists with or without my fix?

[fnfilho]

I wasn't able to test it because I am using it through another dependency for React. Would need the stable release to force npm to use that

[invisor]

1.5 is really buggy. Rolled back to 1.4

[NaturalDevCR]

Rolling back to 1.4 worked for me, hopefully there will be an update with the fix

[green-katerin]

I have the same problem, you can see it here https://jsfiddle.net/swv0e9ra/

[supersnager]

@bochkareva Please try last commit from master. Unfortunately there is no stable release yet with this fix

[green-katerin]

@supersnager thanks, I fixed this in my project by moving "border" to another element

[mrfrigerio]

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, });

For me, this solution worked like a charm! Thank you @shubhcosmos

[ZinoKader]

For those who the above fixes didn't work - my problem was setting an element's padding in the scroll container using em/rem - which perfect-scrollbar couldn't account for. The fix was to simply use px instead.

[cinnabarcaracal]

I use react-perfect-scrollbar and this issue kept coming up. Here is a horrid little workaround I came up with to give us access to @supersnager's fix without waiting for both projects to put out new releases.

...

<PerfectScrollbar
  containerRef={ref => {
              if (ref) {
                // https://github.com/mdbootstrap/perfect-scrollbar/pull/934/files
                // injecting a fix for this issue
                ref._getBoundingClientRect = ref.getBoundingClientRect;

                ref.getBoundingClientRect = () => {
                  const original = ref._getBoundingClientRect();

                  return { ...original, height: Math.round(original.height) };
                };
              }
  }}
>
{content}
</PerfectScrollbar>

...

[supersnager]

@cinnabarcaracal Good job! I'll try it, i also use react-perfect-scrollbar.

[abdulmatinsanni]

I use react-perfect-scrollbar and this issue kept coming up. Here is a horrid little workaround I came up with to give us access to @supersnager's fix without waiting for both projects to put out new releases.

...

<PerfectScrollbar
  containerRef={ref => {
              if (ref) {
                // https://github.com/mdbootstrap/perfect-scrollbar/pull/934/files
                // injecting a fix for this issue
                ref._getBoundingClientRect = ref.getBoundingClientRect;

                ref.getBoundingClientRect = () => {
                  const original = ref._getBoundingClientRect();

                  return { ...original, height: Math.round(original.height) };
                };
              }
  }}
>
{content}
</PerfectScrollbar>

...

You're a legend. Copied and pasted your solution, and it worked straight out of the box. 😁

[mstys]

Some improvements - for horizontal scroll add original.width and for firefox users better to use Math.floor ;)

  <PerfectScrollbar
        containerRef={(ref) => {
          if (ref) {
            // https://github.com/mdbootstrap/perfect-scrollbar/pull/934/files
            ref._getBoundingClientRect = ref.getBoundingClientRect;

            ref.getBoundingClientRect = () => {
              const original = ref._getBoundingClientRect();

              return {
                ...original,
                width: Math.floor(original.width),
                height: Math.floor(original.height),
              };
            };
          }
        }}
      >
        {this.props.children}
      </PerfectScrollbar>

[efreibe]

In my case, I was fighting with this behaviour until I've discovered that the 1px border was the culprit.

[supersnager]

I have tested solution proposed by @cinnabarcaracal and its's almost perfect but... getBoundingClientRect() function returns object of type DOMRect, which cannot be copied by object spread operator like this {...original}. Its explained here: https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect#Notes Thus object properties should be copied manually. Because overwitten getBoundingClientRect can be used also for other calculations in client code (e.g. i'm using it to do some calculations to keep scroll at the bottom of chat messages list) we can't omit properties other than witdh an height.
So all properties returned from getBoundingClientRect() must be copied.
Also, someone for some reason may want to have access to the original sizes, so it can be added as additional properties to returned object.

<PerfectScrollbar
  containerRef={ref => {
              if (ref) {
                // https://github.com/mdbootstrap/perfect-scrollbar/pull/934/files
                // injecting a fix for this issue
                ref._getBoundingClientRect = ref.getBoundingClientRect;

                ref.getBoundingClientRect = () => {
                  const original = ref._getBoundingClientRect();

                  return {
                    bottom: original.bottom,
                    left: original.left,
                    right: original.right,
                    top: original.top,
                    width: Math.round(original.width),
                    _width: original.width, 
                    height: Math.round(original.height),
                    _height: original.height, 
                    x: original.x,
                    y: original.y
                  };
                };
              }
  }}
>
{content}
</PerfectScrollbar>

BTW As @efreibe notices firefox behaves differently. For me Math.floor doesn't work, so im searching for solution.

[viaativaweb]

Making sure the scroll element has position: relative fixed the problem for me

[totszwai]

Sadly, we ended up ditching perfect-scrollbar as it gave us more trouble... as Internet Explorer is now obsolete and the new Edge is using Chromium, there is much less need to use perfect-scrollbar.

The following vanilla CSS does pretty much the same thing.

// W3C standard/Firefox-only
* {
    scrollbar-width: thin;
    // https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color
    scrollbar-color: #d2d2d2 #eeeeee;
}

// Chrome/Edge/Safari
*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
*::-webkit-scrollbar-thumb {
    background-color: #d2d2d2;
}

*::-webkit-scrollbar-track,
*::-webkit-scrollbar-corner {
    background: #eeeeee;
}

[lackneets]

I found my container has border-top 1px, problem solved after removing it.

[StrikeAgainst]

Bump, when will this make it into a stable release?

[juliandm]

For react users having this issue, i switched to with success https://github.com/malte-wessel/react-custom-scrollbars

[anas-appiskey]

For react users having same issue use position : static, will solve this

<ScrollBar style={{ position: "static", height: "as per your choice" }}>

[dongloo]

Set height: auto or some px !important for element, this working!

[hamzahoda]

For react users use version 1.4 .0 . It works perfectly npm i perfect-scrollbar@1.4.0