mdbootstrap / perfect-scrollbar

Minimalistic but perfect custom scrollbar plugin. Get more free components with Material Design for Bootstrap UI Kit (link below)
https://perfectscrollbar.com/
MIT License
346 stars 66 forks source link

Bug and Solution:inner scrolling triggers outer scrolling #136

Open chirpmonster opened 2 years ago

chirpmonster commented 2 years ago

Great project! Our company has used this repository for several years.

However, we have encountered a problem that inner scrolling will trigger outer scrolling. We read the source code of this project and located the problem.

In the project, e.stoppropagation() and e.preventdefault() are used to prevent outer scrolling. And when "hitsBound", the outer scroll is not prevented.

Here is the code

if (Math.abs(deltaY) > Math. abs(deltaX)) {
    hitsBound = isTop || isBottom;
} else {
    hitsBound = isLeft || isRight;
}

However, this leads to a problem. When I roll down on the top, because the first lower roll is "hitBound", the outer roll is not prevented, resulting in the inner and outer roll together.

Another problem is that when the touchpad scrolls, there is a slight offset occasionally, resulting in a momentary deltaY=deltaX. This will cause to judge "isLeft" and "isRight" at that moment. This is a very serious problem, which will lead to the inability to stop the external scrolling at that moment. In fact, our page scrolling up and down is much higher than scrolling left and right. I think that when deltaY=deltaX occurs, we should give priority to scrolling up and down rather than left and right

Here is my modified code

if (Math.abs(deltaY) >= Math. abs(deltaX)) {
    hitsBound = (isTop && deltaY > 0) || (isBottom && deltaY < 0);
} else {
    hitsBound = (isLeft && deltaX > 0) || (isRight && deltaX < 0);
}

Thanks for reading. This problem has brought us some troubles. I also raised a pull request. I hope it can be repaired as soon as possible. Thanks!