web-dev-qa-db-ja.com

IE 11スムーズスクロールが中間スクロールイベントを発生させない

次のような単純なテストケースを作成すると、次のようになります。

_document.documentElement.addEventListener('scroll', function() {
    console.log(document.documentElement.scrollTop);
});
_

次に、トラックをクリックするか、PageDown/PageUpを使用して、スクロールバーを使用して移動およびスクロールすると、スクロールアニメーションの最後にイベントが1つだけ表示されることがわかります。

理論的には、スクロールイベントをシミュレートすることで、その動作の一部を修正できます。 jQueryとアンダースコアを使用したサンプルコード：

_$(function () {
    var $document = $(document), until = 0;

    var throttleScroll = _.throttle(function () {
        $document.scroll();
        if (+new Date < until) {
            setTimeout(throttleScroll, 50);
        }
    }, 50);

    $document.keydown(function (evt) {
        if (evt.which === 33 || evt.which === 34) {
            until = +new Date + 300;
            throttleScroll();
        }
    });
});
_

しかし、それでも機能しません。元のscrollTopと宛先scrollTopのスクロールイベントのみを取得し、その間に値はありません。

その後、10ミリ秒ごとにconsole.log(document.documentElement.scrollTop)を実行すると、IEは、スクロール時にscrollTopを更新しないことがわかります。

何かをスクロール位置に「固定」したい場合、これは非常にイライラします。 IEではぎくしゃくします。

私は他のブラウザでこの動作を観察せず、以前のIEバージョンでテストしませんでした。

IEの動作を修正する方法を誰かが見つけた場合（IE 11？

ありがとう:-)

javascriptjqueryinternet-explorerunderscore.js
22
daniel.gindi

あなたが言った：「誰かがIEの動作を修正する方法を見つけた場合（おそらく、スムーズなスクロールをオフにする魔法のCSSがあるでしょう） IE 11？）で、私はそれについて聞きたいです！」

これはオフにはなりませんが、固定要素を使用した場合のスムーズスクロールの問題を解決するために使用するものは次のとおりです。

if(navigator.userAgent.match(/Trident\/7\./)) {
    $('body').on("mousewheel", function ( event ) {
        event.preventDefault();
        var wd = event.wheelDelta;
        var csp = window.pageYOffset;
        window.scrollTo(0, csp - wd);
    });
}
9
M H

あなたが説明している問題は、Windows 7で実行されているInternet Explorer 11のインスタンスに限定されています。この問題は、IE 11が生まれたプラットフォーム、Windows 8.1には影響しません。 IE 11 Windows 7は、上記の他のスクロール実装と同様のカテゴリに分類されます。これは理想的ではありませんが、当面は対処する必要があります。

これについては引き続き調査します。実際、Windows 7マシンをクローゼットから掘り出して、朝一番にセットアップし、さらに調査しました。この問題に正面から取り組むことはできませんが、おそらく、問題自体を回避する方法があります。

つづく。

6
Sampson

クレイジーな最後の手段として（問題が重大な場合、実際にはそれほどクレイジーではないようです）-おそらくネイティブスクロールを完全にオフにして、カスタムスクロールを使用します（つまり http://jscrollpane.kelvinluck.com/ ）？そして、onscrollのものをそのカスタムイベントにバインドします： http://jscrollpane.kelvinluck.com/events.html

1
Andrey