在单击和拖动任何可滚动容器的滚动条时触发全局事件

Question

Let me explain the problem clearly, I have many containers ( being added dynamically ) in which I have custom dropdowns. The containers are set overflow: auto .

So, the custom dropdown suggestions are being hidden inside that scrolling containers. To fix this, I am using position: fixed to the custom dropdowns.

Now, I am able to see the suggestions and I am using jquery to stitch those suggestions to their respective dropdowns. But now, when I scroll a specific container, the custom dropdowns suggestions are moving away from that dropdown.

So, ofcourse I need to call those stitch function again on scroll of those containers. Well, I am doing them now on mousewheel and DOMMouseScroll events on Window element which is triggering whenever I scroll a container.

But now when I click on the scrollbar to move it, the event is not triggering. Hence, I need an event which triggers when I click on the any containers scrollbar to drag it.

window.addEventListener('DOMMouseScroll', function () {
    console.log("hello");
});
window.addEventListener('mousewheel', function () {
    console.log("hello");
});

DEMO

PS: I don't want to register events specifically to each container. I want to trigger those events globally. ( as I did in the above code by registering them to window element ).

Answer 1

You need to add the capture flag on the event listener for it to work on the 'child' elements. By default this flag is false (docs here: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener )

If true, useCapture indicates that the user wishes to initiate capture. After initiating capture, all events of the specified type will be dispatched to the registered listener before being dispatched to any EventTarget beneath it in the DOM tree. Events which are bubbling upward through the tree will not trigger a listener designated to use capture. See DOM Level 3 Events and JavaScript Event order for a detailed explanation. If not specified, useCapture defaults to false.

window.addEventListener('scroll', function () {
    console.log("hello");
}, true); // <-- the last argument is the capture argument. 

here is your demo altered: http://jsfiddle.net/rlemon/dq5h4kor/8/

Answer 2

Have you considered using jQuery 'scroll' event?

If you do

$('.parent').scroll(function() {
   //yourcode
});

Triggering on every div element :

   $('*').scroll(function() {
       //yourcode
    });

The above will trigger the scroll event every time you scroll within every element.

It will trigger both on mousewheel scroll as well as when dragging the scrollbar. JS fiddle