Overscroll-behavior: contain /* Prevent SCROLL-CHAINING to parent elements. Overflow: auto /* The panel becomes SCROLLABLE due to content overflow.
Using CSS Overscroll-Behavior To Prevent Scrolling Of Parent Containers From Within Overflow Containers The container on the left has no modifying CSS properties while the container on the right has the CSS property overscroll-behavior: contain: To see this in action, I have two overflow: auto elements laid-over a scrollable body element. This will prevent the "scroll chaining" behavior, which will, in turn, keep the mouse-wheel active within the target element. To do this (in Chrome, Firefox, and Edge), we can add the CSS property overscroll-behavior: contain to the overflow: auto element.
Really, what we want to happen is to have the scrolling behavior always contained within the overflow: auto element. More often than not, this leads to an unexpected and undesired user experience (UX). Once this "scroll chaining" occurs, subsequent use of the mouse-wheel may not be applied to the overflow: auto element instead, the expression of the scrolling may continue to manifest in the ancestor element. However, when the user hits the top or the bottom of that content, the browser may start to scroll one of the ancestor elements, most commonly the body element. If you have an overflow: auto element, the user can scroll the content contained within that element.
#Html disable overflow scrolling code
View this code in my JavaScript Demos project on GitHub. Run this demo in my JavaScript Demos project on GitHub.
0 kommentar(er)
