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?

Answer 1

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?