The script does not work properly in the browser Internet Explorer. How to fix?

Question

Welcome! Help me please! The script does not work properly in the browser Internet Explorer. During the scroll there is a strong pull the block up and down. How to fix? Help me please. Thank you very much for your help!

$(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 {
 position: relative;
 overflow: hidden;
 width: 100%;
 font-size: 3em;
 margin: 0;
 padding: 0;
 height: 250px;
}
#horizontal .horizontal {
 position: absolute;
 width: 100%;
 left: -100%;
 padding: 20px;
}
#horizontal .horizontal .h_blockquote {
 position: relative;
 width: 100%;
 margin: 0 auto;
 font-size: 24px;
 line-height: 1.3em;
 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

You can't rely on scroll firing smoothly in old browsers or when using jQuery.

The problem is that the event that fires on scroll is allowed to cancel it, so the browser has to complete the event script before appearing to scroll the page - if this takes too long the scroll appears to stutter or hang.

In your script you're calling jQuery methods like .width() and .outerHeight() and these wrap underlying methods that wait for a DOM reflow. They're slow, not incredibly slow, but slow enough that a scroll animation can appear to drop frames or stutter waiting for them. You also change positioning, which also causes a reflow.

Modern browsers have a new feature to handle this: passive event listeners - as passive listeners can't cancel the event the browser doesn't have to worry about waiting for them. jQuery still doesn't support them, so it's recommended not to use jQuery for scroll events at all.

However none of those are available to IE - IE's solution to this problem was to debounce the event slightly. Multiple scrolls in quick succession would be stacked and only periodically fired, and DOM reflow changes can cause it to fire partly before and partly after. You don't really notice if you drag the slider but scrolling with the wheel appears to jerk when it catches up.

I'd try the following:

• Move all the size checks that don't change between scroll events outside the scroll.

• Change the positioning to be done with CSS transform: translate as this uses the graphics card to do the calculations.