브라우저 Internet Explorer에서 스크립트가 제대로 작동하지 않습니다. 어떻게 고치는 지?

Question

Welcome! 도와주세요, 제발! 스크립트가 브라우저 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, 그래서 스크롤 이벤트를 전혀 사용하지 않는 것이 좋습니다.

그러나 이들 중 아무 것도 IE에 사용할 수 없습니다.이 문제에 대한 IE의 해결책은 으로 디버그하는 것이 었습니다. 이벤트가 약간 빗나갔습니다. 연속적으로 여러 번 스크롤하면 스택되고 주기적으로 만 실행되며 DOM 리플로 변경으로 인해 부분적으로 부분적으로 또는 부분적으로 실행될 수 있습니다. 슬라이더를 드래그하면 실제로 눈치 채지 못하지만 휠을 스크롤하면 잡을 때 깜박입니다.

나는 다음을 시도 것 : 스크롤 외부 스크롤 이벤트 사이에 변경되지 않습니다

• 이동 모든 크기 검사를.

• CSS transform: translate으로 수행 할 위치를 변경하려면 그래픽 카드를 사용하여 계산합니다.