First, as a user, when on a web page that scrolls and contains elements which scroll, I find it terrible behavior to scroll the parent of an element when it has reached it's end. To be clear: a page that is 1000px high with a window that is 700px high will scroll. This page then has an element that is sized to 200px high with 400px of content scrolling inside it. When you place your mouse cursor over the 200px element and scroll, the content in that element will scroll. When you reach the end of that content, and the mouse cursor is still hovering that same element, the page will then begin to scroll.
I find this behavior insane and terrible, am I the odd-ball or outlier on this? Or do others also find this at least irritating or problematic?
Related but not addressed here is the issue of scrolling down a long page and a scrollable element becoming focused by moving under the stationary cursor and then acting on the scrolling event?
Is there just a bigger problem of bad user experience from nested scrolling?
Second; is there a way, maybe with injected javascript from a browser plugin, to change this behavior? Is it possible to find all scrolling elements and prevent them from bubbling the scroll event? (I'm ok with JS, but I'm years out of practice with DOM)
Top comments (1)
I think the typical way this is dealt with is that
onmouseenterthe the page's body is given a class that disables scrolling (overflow hidden or something like that) and then ononmouseout, that class is removed and normal scrolling is restored.It's kind of a pain to deal with so my calculus has always revolved around just how much this affects the overall user experience. If it's a behavior they need to do often, or as one of only a few things they'd do on the site, I'd go all in on making it right. If it's a small thing that doesn't happen often, I'd accept a non-perfect user experience as not the end of the world.