该脚本在浏览器 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 {
	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

您不能依赖scroll 在旧浏览器或使用 jQuery 时顺利地触发。

问题在于允许在滚动时触发的事件将其取消，因此浏览器必须在出现滚动页面之前完成事件脚本 - 如果这花费的时间过长，滚动似乎会卡住或挂起。

在您的脚本中，您正在调用诸如 .width() 和 .outerHeight() 之类的 jQuery 方法，这些方法包含在等待 DOM 回流的 underlying methods。它们很慢，不是特别慢，但足够慢，滚动动画可能会出现掉帧或结巴等待它们。您还会更改定位，这也会导致回流。

现代浏览器有一个新功能来处理这个问题：passive event listeners - 因为被动侦听器无法取消事件，浏览器不必担心等待它们。 jQuery still doesn't support them，所以建议不要使用 jQuery 来处理滚动事件。

然而，这些都不适用于 IE - IE 对这个问题的解决方案是稍微debounce 事件。快速连续的多个滚动将被堆叠并且仅周期性地触发，并且 DOM 回流更改可能导致它部分在之前和部分之后触发。如果您拖动滑块，您不会真正注意到，但是当它赶上时，使用滚轮滚动似乎会突然出现。

我会尝试以下方法：

• 将所有在滚动事件之间不变的大小检查移到滚动之外。

• 使用CSS transform: translate 更改要完成的定位，因为它使用显卡进行计算。