perfect-scrollbar
perfect-scrollbar copied to clipboard
mdbootstrap
scroll bar keeps scrolling down exceeding contents length
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
- [ ] 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
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, });
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.
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
it probably cause by rails, rail-y on mouse scroll and rail-x happend on touch device
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 yes it is still coming when the parent div have height in points.
Try my fix above and the reason i debugged it , its tested and working fine on dev and prod
@supersnager thanks for fix, i tried your fix on master but the issue still exists
@Dev1lDragon Thanks for the tips, after rebuild it proves the fix works :) And thanks @supersnager again, you are life saver 👍
I have tried it at my end, and this issue is still coming in the IE. Please have a look upon it.
@pushpender98 Please provide an example on jsfiddle or as github project, i will try to fix it.
@supersnager , This issue is occuring in IE only at some specific version. So not able to reproduce on jsfiddle.
@pushpender98 Sorry, but i can't help if it's not possible to reproduce this issue
@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.
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?
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.
I also have this issue. Happening on Chrome 81. Outside div does not have border, nor inside one.
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?
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
