6

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?

Michael
  • 6,123
  • 9
  • 49
  • 77
  • Can you make working example of this? – Parth Trivedi Nov 11 '16 at 09:04
  • @ParthTrivedi Here: https://jsfiddle.net/3zc3n1oh/1/ – Michael Nov 11 '16 at 09:24
  • 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

1 Answers1

5

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?

Community
  • 1
  • 1
madalinivascu
  • 31,556
  • 4
  • 35
  • 52
  • 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