ブラウザのInternet Explorerでスクリプトが正しく動作しません。直し方？

Question

ようこそ！お願い助けて！ブラウザのInternet Explorerでスクリプトが正常に動作しません。スクロール中に、ブロックを強く引き上げます。直し方？お願い助けて。ご助力ありがとうございます！

$(function() { 
 
var $hor = $("#horizontal"); 
 
$("body").css('padding-bottom', $(window).width()*2); 
 
var delta = 0; 
 
$(window).on('scroll', function() { 
 
    var top = $(document).scrollTop(); 
 
    var width = $(window).width(); 
 
    var lim = $hor.position().top - (delta) - ($(window).height() - $hor.outerHeight())/2; 
 
    delta = Math.min(Math.max(top - lim, 0), width * 2); 
 

 
    $(".horizontal:first", $hor).css({left : delta}); 
 
    $(".horizontal:last", $hor).css({left : -(width*2 - delta)}); 
 
    $("body").css({'padding-top': delta, 'padding-bottom': width*2 - delta}); 
 
}); 
 

 
});

p { 
 
    height: 500px; 
 
} 
 
#horizontal { 
 
\t position: relative; 
 
\t overflow: hidden; 
 
\t width: 100%; 
 
\t font-size: 3em; 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t height: 250px; 
 
} 
 
#horizontal .horizontal { 
 
\t position: absolute; 
 
\t width: 100%; 
 
\t left: -100%; 
 
\t padding: 20px; 
 
} 
 
#horizontal .horizontal .h_blockquote { 
 
\t position: relative; 
 
\t width: 100%; 
 
\t margin: 0 auto; 
 
\t font-size: 24px; 
 
\t line-height: 1.3em; 
 
\t color: #000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p>test</p> 
 
<div id="horizontal"> 
 
<div class="horizontal"> 
 
<div class="h_blockquote"> 
 
<div class="h_blockquote_wrap">The script does not work properly in the browser Internet Explorer. The script does not work properly in the browser Internet Explorer.</div> 
 
</div> 
 
</div> 
 
<div class="horizontal"> 
 
<div class="h_blockquote"> 
 
<div class="h_blockquote_wrap">The script does not work properly in the browser Internet Explorer. The script does not work properly in the browser Internet Explorer.</div> 
 
</div> 
 
</div> 
 
</div> 
 
<p>test</p>

Answer 1

あなたはscrollは、古いブラウザでスムーズを発射するかのjQueryを使用しているときに頼ることはできません。

問題は、スクロールで発生するイベントがキャンセルできるため、ブラウザがイベントスクリプトを完了してからページをスクロールする必要があることです。

あなたのスクリプトでは、.width()と.outerHeight()のようなjQueryメソッドを呼び出しています。これらはDOMリフロを待つunderlying methodsをラップします。彼らは遅いですが、非常に遅くはありませんが、スローアニメーションがフレームを落としたり、それらを待っているように見えるほど遅くなります。また、位置決めを変更すると、リフローが発生します。

最新のブラウザには、これを処理する新しい機能があります。passive event listeners - パッシブリスナーは、ブラウザが待機することを心配する必要のないイベントをキャンセルできません。 jQuery still doesn't support themなので、スクロールイベントにはjQueryを使用しないことをお勧めします。

しかし、これらのどれもIEでは利用できません。この問題に対するIEの解決策は、にデバウンスのイベントが少しありました。連続して複数のスクロールが積み重ねられ、定期的にのみ起動され、DOMリフローの変更により、部分的に前と後の部分的に発生する可能性があります。スライダをドラッグすると実際に気付かないけど、ホイールでスクロールすると、それが捉えられたときにはじまるように見えます。

私は次のことを試してみた：

• はスクロール外のスクロールイベントの間で変化しないすべてのサイズのチェックを移動します。

• CSS transform: translateで行われる位置決めを変更するには、グラフィックカードを使用して計算します。