CODEWITHSUNDEEP
javascript
pawelczak
pawelczak

Reputation: 134

How to stop scroll event from propagating with javascript?

Lets take this simple example:

HTML:

<div id="A">
    <div id="B">
    </div>
</div>

When user moves mouse to the element B and starts to scroll, the element A should not get scroll event. How to disable scroll event from propagation?

EDIT: I've tried this js code and it does not work. Any ideas?

document.getElementById("B").scroll = function(e) {e.stopPropagation();}

Upvotes: 7

Views: 15015

Answers (2)

Amin Kodaganur
Amin Kodaganur

Reputation: 666

You need to use event.stopPropagation(); more info jsfiddle demo

Html : 

<div id="A">
   <div id="B">

   </div>
</div>

Jquery

$( "#A" ).scroll(function( event ) {
  alert('A scrolled');
});
$( "#B" ).scroll(function( event ) {
   event.stopPropagation();
   alert('B scrolled');
});

Upvotes: 3

Scarecrow
Scarecrow

Reputation: 4137

The event.stopPropagation() method stops the bubbling of an event to parent elements, preventing any parent event handlers from being executed.

https://developer.mozilla.org/en/docs/Web/API/Event/stopPropagation

Upvotes: 3

Related Questions