Incorrect scroll behaviour on reaching top/bottom

[zadremal]

Hi, guys. I consider this is a bug because it appears on the official docs live preview page. https://mdbootstrap.com/snippets/jquery/filipkapusta/765760?utm_source=GitHub&utm_medium=PerfectScrollbar

When you scroll the inner container to the bottom (or top) at the very last scroll movement both, inner and page scroll events fire simultaneously. Which is different from a standard scroll behavior, when page scroll event fires only AFTER the bottom/top border of the nested scroll container has been reached.

Will be glad to get any feedback about this issue and the possible ways of solving it. Thanks.

[volkansag]

you can fix it by adding

.ps{ touch-action: none !important; }

[zadremal]

@volkansag, thanks for the response! But it seems like it does not help. I had tried to add this style to the code snipped provided above, but the scroll behavior remained the same

[ZsharE]

Solution: Just add wheelPropagation option and set it to false.

const ps = new PerfectScrollbar(demo, { wheelPropagation: false });

[zadremal]

@ZsharE this is not an option, because I would like to keep the behavior of scrollbar as it is. On reaching the top or bottom of the scrollable container I should be able to scroll the page. Stopping wheel propagation will block all outer scroll events inside perfect scrollbar area, instead of fixing this particular issue that I have described before.

[bagaskarala]

Solution: Just add wheelPropagation option and set it to false.

const ps = new PerfectScrollbar(demo, { wheelPropagation: false });

wow thank, it fix unintended behavior when scrolling on touch devices