在“滚动”上绑定在IE 11中不起作用

Question

I have an Angular directive that needs to do something on the scroll event on an ELEMENT (plz don't say to do this on document. not an option). CSS on this element had "overflow-y: visible" so I changed to "overflow: auto" for now for testing. On IE 11, I cannot trigger the scroll event but in Chrome, things are working fine.

app.directive('infiniteScroller', ['$document', function($document){
    return {
        restrict: 'AE',
        link: function($scope, $element, $attrs){
            var elm = document.querySelector('.class-for-some-div');
            var elm2 = $($element).closest('.class-for-some-div');
            console.log('infiniteScroller initialized, querysel, jquery', elm, elm2);
            elm.onscroll = function(event) {
                console.log('in bind scroll');
            };
            elm.addEventListener('scroll', function() {
                console.log('addEventListener scroll');
            },false);
            // elm.attachEvent('onscroll',function() {
            //     console.log('attachEvent onscroll');
            // });  //doesn't work on Chrome or IE
            elm2.bind('DOMMouseScroll', function() {
                console.log('bind DOMMouseScroll');
            });
            elm2.bind('wheel', function() {
                console.log('bind wheel');
            });
            // elm2.bind('scroll', function() {
            //     console.log('bind scroll');
            // });
        }
    };
}]);

As you can see, I'm trying all kinds of stuff but only 'wheel' event console.logs in IE and none others do. Why does IE not trigger the 'scroll' event but only 'wheel' event? I only see 'bind wheel' on IE console. Also interested in what works in other IE versions (9+). Please help.

Answer 1

I had similar issue in IE.

It looks like when the content of the div which has the horizontal scroll is not visible than event is not fired up. Not working examle:

<div class="horizontal_scroller_container" style="width:500px;">
    <div class="horizontal_scroller" style="height:17px;overflow:scroll;">
        <div style="width: 6450px;">&nbsp;</div>
    </div>
</div>

Working examle:

<div class="horizontal_scroller_container" style="width:500px;">
    <div class="horizontal_scroller" style="overflow:scroll;">
        <div style="width: 6450px; height:1px;">&nbsp;</div>
    </div>
</div>

Here is a fiddle which shows the problem and the resolution: https://jsfiddle.net/1zzgnec6/3/