Javascript 在'上绑定;滚动';不';I don’我不在IE11工作

Javascript 在'上绑定;滚动';不';I don’我不在IE11工作,javascript,scroll,angularjs-directive,event-handling,bind,Javascript,Scroll,Angularjs Directive,Event Handling,Bind,我有一个Angular指令,需要在元素的scroll事件上执行某些操作(请不要在文档上执行此操作,这不是一个选项)。这个元素上的CSS有“overflow-y:visible”,所以我现在改为“overflow:auto”进行测试。在IE 11上,我无法触发滚动事件,但在Chrome中,一切正常 app.directive('infiniteScroller', ['$document', function($document){ return { restrict: '

我有一个Angular指令,需要在元素的scroll事件上执行某些操作(请不要在文档上执行此操作,这不是一个选项)。这个元素上的CSS有“overflow-y:visible”,所以我现在改为“overflow:auto”进行测试。在IE 11上,我无法触发滚动事件,但在Chrome中,一切正常

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');
            // });
        }
    };
}]);

正如你所看到的,我尝试了各种各样的东西,但只有“轮子”事件控制台。在IE中登录,其他人都没有。为什么IE不触发“滚动”事件,而只触发“滚轮”事件?我只在IE控制台上看到“绑定轮子”。还对其他IE版本(9+)的工作原理感兴趣。请帮忙。

我在IE中也遇到过类似的问题

看起来,当具有水平滚动条的div的内容不可见时,事件未启动。 不工作示例:

<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>
<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>

工作示例:

<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>
<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>

下面是一把小提琴,它显示了问题和解决方案: