stopPropagation in scroll()-Method won't stop outer div from scrolling

Question

I have a inner dev with a fixed height and overflow-y: scroll; where the contents can be scrolled in y direction. When the scrolling hits the top or the bottom the outer div is scrolled. I want to prevent that.

<section id="concept" class="testimonials bg-black">
   <div class="col-lg-12">
      <div class="concept-frame">
      </div>
   </div>
</section>

I use following JavaScript:

$( ".concept-frame" ).scroll( function(e) {
    console.log( "Scolling ..."+$(this).scrollTop() );

    e.stopPropagation();
} );

But with no effect. How can I stop that the scrolling is propagated to the outer div?

Supposing it _would_ work, what would I do as a user when I see that the outer content has a scroll bar, and I do indeed want to discover what's hidden below? You have prevented me from scrolling the outer div, how do you re-enable me to do it? And make me discover it? (Your question is entirely legitimate, but the best answer to nested scrolling, in terms of UX, might still be: avoid it, if at all possible.) — hashchange, Nov 11 '16 at 10:53
I like to stop it only if the user scrolls in the inner div. See the solution of @madalin ivascu : jsfiddle.net/8wtee37u — Michael, Nov 11 '16 at 12:22
That's exactly what I mean ;) In the demo, put the mouse above the inner div and start scrolling. First, the outer div scrolls (as expected). When the inner div moves underneath the mouse, the outer scrolling stops, inner div scrolls (unfortunate but normal - a jarring user experience. That's why nested scrolling is a bad thing). When the inner div has finished scrolling, nothing else happens. Result: I wanted to scroll down the page, and got stuck as soon as i reached the inner div. — hashchange, Nov 11 '16 at 13:55

score 6 · Accepted Answer · edited May 23 '17 at 12:13

6

the scroll event doesn't bubble so e.stopPropagation(); will not work

to prevent the scroll of the parent see:

Prevent scrolling of parent element?

edited May 23 '17 at 12:13

Community

1
1

answered Nov 11 '16 at 09:08

madalinivascu

32,064
4
39
55

1

I tried to use the code in the answer, but it won't have an effect in my case: https://jsfiddle.net/3zc3n1oh/3/ – Michael Nov 11 '16 at 09:31

chandanbsd · Answer 2 · 2022-07-18T18:06:16.777

The following article worked for me. Please take a look at it.

https://www.bennadel.com/blog/3698-using-css-overscroll-behavior-to-prevent-scrolling-of-parent-containers-from-within-overflow-containers.htm

The basic idea is to set the CSS property of the child div to overscroll-behavior: contain.

Unfortunately, this is not available on IE but seems to be supported by all modern browsers.

The following articles explain the overflow-behavior in great detail:

Please take a look at my codepen and let me know if this is what you were looking for https://codepen.io/chandanbsd/pen/oNqZbZb

.child{
        width: 100px;
    height: 100px;
    background: red;
    overflow: auto;
    overscroll-behavior: contain
    
}

.parent{
    height: 200px;
    width: 150px;
    background: aqua;
    overflow: auto;
}

<html>
<body>
    <h1>Child Div Overscroll Does not propagate to Parent Div</h1>
    <div class="parent">
            <div class="child">Child Div
        Child Div
        Child Div
        Child Div
        Child Div
        Child Div
        Child Div
        Child Div
        Child Div
        Child Div
                </div>
            Parent Div<br>
        Parent Div<br>
        Parent Div<br>
        Parent Div<br>
        Parent Div<br>
        Parent Div<br>
                    Parent Div<br>
        Parent Div<br>
        Parent Div<br>
        Parent Div<br>
        Parent Div<br>
        Parent Div<br>
                    Parent Div<br>
        Parent Div<br>
        Parent Div<br>
        Parent Div<br>
        Parent Div<br>
        Parent Div<br>

        </div>
<body>
    </html>

stopPropagation in scroll()-Method won't stop outer div from scrolling

2 Answers2