我在dom.ready上触发了这两个滚动事件,它们同步主文档和div的水平滚动条之间的滚动。所有浏览器都可以正常工作 - 除了内容有点沉重的IE浏览器中的一些恼人的jank。
单挑:jsScroll0和jsScroll1标志会阻止滚动条锁定,因为每个滚动条试图设置彼此的值时会出现无限循环情况。
$(document).ready(function () {
//-------------------------------------------
// S y n c t w o S c r o l l b a r s
//-------------------------------------------
// Ver.01
//Basically the same as my concept:
//http://stackoverflow.com/questions/762274/how-to-synchronize-scrolling-positions-for-several-iframes
//Sync's scrollbars, and the flags fix infinite loop.
//ALSO:
//http://stackoverflow.com/questions/18952623/synchronized-scrolling-using-jquery
//has % for scrollbars of different sizes
var jsScroll0;
var jsScroll1;
var windows = [$(document), $('#scrollP')];
windows[0].on('scroll.scrollInTheSameTime', function () {
if (jsScroll1 === true) {
jsScroll1 = false;
return;
}
jsScroll0 = true;
windows[1].scrollLeft(windows[0].scrollTop());
});
windows[1].on('scroll.scrollInTheSameTime', function () {
if (jsScroll0 === true) {
jsScroll0 = false;
return;
}
jsScroll1 = true;
windows[0].scrollTop(windows[1].scrollLeft());
});
});
我认为问题的症结在于IE为什么会挣扎而另一方却没有? IE是否完全不同地处理滚动/触发事件?
ATTEMPT:我尝试使用 document.documentElement.scrollTop /删除jquery开销,并通过 document.getElementById('scrollP')访问div - 但是它没有什么区别。