javascript - 该脚本无法在浏览器 Internet Explorer 中正常运行。怎么修？

Question

欢迎光临!请帮帮我!该脚本无法在浏览器 Internet Explorer 中正常运行。在滚动过程中，会强烈地上下拉动方 block 。怎么修？请帮帮我。非常感谢您的帮助!

$(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

在旧浏览器或使用 jQuery 时，您不能依赖滚动 平滑 触发。

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

在您的脚本中，您正在调用 jQuery 方法，例如 .width() 和 .outerHeight() 并且这些方法包装 underlying methods等待 DOM 回流。它们很慢，不是非常慢，但足够慢以至于滚动动画可能会出现丢帧或断断续续地等待它们。您还更改了定位，这也会导致回流。

现代浏览器有一个新功能来处理这个问题:passive event listeners - 由于被动监听器无法取消事件，浏览器不必担心等待它们。 jQuery still doesn't support them ，因此建议根本不要将 jQuery 用于滚动事件。

但是这些都不适用于 IE - IE 解决这个问题的方法是稍微反跳事件。快速连续的多个滚动会堆叠起来，并且只会定期触发，DOM 回流更改可能会导致它部分在之前触发，部分在之后触发。如果您拖动 slider ，您并不会真正注意到，但当它追上时，使用滚轮滚动似乎会发生抖动。

我会尝试以下操作:

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

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