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

13,753

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?

Share:
13,753
Michael
Author by

Michael

Contradictions are an essence of life. For example time and quality, being serious and having fun, deadlines and details. My favourite polarity is programming and communicating openly without fear. I do both with great enthusiasm. With 17 I programmed video games in a professional environment, with 28 secure online banking applications. Later I developed a web archive and a computer playground. In my portfolio you find a selection of my projects. I’m currently fluent in HTML, CSS, JavaScript, jQuery, React/Redux, node.js, Express, Bootstrap, Hugo. But also eager to learn more.

Updated on June 05, 2022

Comments

  • Michael
    Michael almost 2 years

    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?