Login/Register
stopPropagation in scroll()-Method won't stop outer div from scrolling
Asked Answered
Solved javascriptjqueryhtmlscrollstoppropagation
B

2

9

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?

Bauble answered 11/11, 2016 at 9:0 Comment(5)
Can you make working example of this? – Dedicated
@ParthTrivedi Here: jsfiddle.net/3zc3n1oh/1 – Bauble
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.) – Hoppe
I like to stop it only if the user scrolls in the inner div. See the solution of @madalin ivascu : jsfiddle.net/8wtee37u – Bauble
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. – Hoppe
F
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?

Flurry answered 11/11, 2016 at 9:8 Comment(1)
I tried to use the code in the answer, but it won't have an effect in my case: jsfiddle.net/3zc3n1oh/3 – Bauble
H
1

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>
Heterogenesis answered 18/7, 2022 at 17:28 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.