在“滾動”上綁定在IE 11中不起作用

Question

我有一個Angular指令，該指令需要對ELEMENT上的scroll事件做一些事情（請不要說對文檔執行此操作。這不是一個選擇）。 此元素上的CSS具有“ overflow-y：可見”，因此我現在更改為“ 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中只有'wheel'事件console.logs，其他人都沒有。 IE為什么不觸發“滾動”事件而是僅觸發“滾輪”事件？ 我只在IE控制台上看到“綁定輪”。 也對其他IE版本（9+）中的功能感興趣。 請幫忙。

Answer 1

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

這是一個顯示問題和解決方法的小提琴： https : //jsfiddle.net/1zzgnec6/3/