javascript - 同步滚动 3(+) 个元素？

Question

我正在尝试使用下面的代码作为启动点来实现两个以上 DIV 的同步滚动。所有 DIV 的高度和宽度都相同，但字符数不同。百分比同步非常适合#div1 和#div2(它真的很漂亮)。但尽管经过数小时的摆弄，我还是无法让第三个 DIV 正常工作(我尝试过的所有方法都存在故障且笨重)。我是新手，所以我希望有人能提供帮助!

$(document).ready(function() {

var $divs = $('#div1, #div2');
var sync = function(e){
var $other = $divs.not(this).off('scroll'), other = $other.get(0);
var percentage = this.scrollTop / (this.scrollHeight - this.offsetHeight);
other.scrollTop = percentage * (other.scrollHeight - other.offsetHeight);
setTimeout( function(){ $other.on('scroll', sync ); },10);
}
$divs.on( 'scroll', sync);
});

jsfiddle.net/84oz9boL/11当我添加 ,#div3 时，卷轴行为不稳定...

var $divs = $('#div1, #div2');
var sync = function(e){
    var $other = $divs.not(this).off('scroll'), other = $other.get(0);
    var percentage = this.scrollTop / (this.scrollHeight - this.offsetHeight);
    other.scrollTop = percentage * (other.scrollHeight - other.offsetHeight);
    setTimeout( function(){ $other.on('scroll', sync ); },10);
}
$divs.on( 'scroll', sync);

div {
    overflow: scroll;
    float: left;
    text-align: justify;
}
#div1 {
    height : 400px;
    width: 200px;
}
#div2 {
    height : 400px;
    width: 200px;
    margin-left: 50px;
}
#div3 {
    height : 400px;
    width: 200px;
    margin-left: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="div1">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent in neque aliquam, blandit purus id, consequat ex. Quisque efficitur orci nunc, a sodales sapien vehicula et. Proin dignissim facilisis felis, sit amet placerat odio vehicula sed. Quisque vulputate eros magna, nec scelerisque augue auctor id. Pellentesque mi elit, malesuada imperdiet efficitur luctus, scelerisque nec nisi. Nulla eget volutpat elit, in ornare lacus. Suspendisse sit amet lacus nec ipsum luctus semper. Mauris ipsum eros, laoreet dignissim elementum ac, viverra sed est. Aenean aliquet tempor justo, non hendrerit massa convallis ac. Aenean volutpat consectetur ex, a sodales sem tincidunt et. Donec volutpat ante eu odio ornare malesuada. Sed dignissim purus lacinia tempor sagittis. Nam quis arcu massa. Nam neque sem, dignissim sit amet congue quis, rutrum vel quam. Nunc ut porta sem. Maecenas suscipit lacus at interdum aliquam. In aliquam turpis eget arcu faucibus, sit amet vulputate purus ornare. Fusce vitae nisi odio. Nunc eget bibendum magna, eget eleifend massa. Nullam eu dui at nunc eleifend lacinia tincidunt a lorem. Pellentesque egestas fermentum est, vitae rutrum turpis rhoncus quis. Etiam in rhoncus tellus. Morbi tellus erat, laoreet at lectus sed, efficitur vestibulum lorem. Fusce tempus, quam nec feugiat ornare, velit nisl ultricies tortor, id elementum ex lectus et sem. Donec ornare ante sed elit sollicitudin tempor.
</div>

<div id="div2">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent in neque aliquam, blandit purus id, consequat ex. Quisque efficitur orci nunc, a sodales sapien vehicula et. Proin dignissim facilisis felis, sit amet placerat odio vehicula sed. Quisque vulputate eros magna, nec scelerisque augue auctor id. Pellentesque mi elit, malesuada imperdiet efficitur luctus, scelerisque nec nisi. Nulla eget volutpat elit, in ornare lacus. Suspendisse sit amet lacus nec ipsum luctus semper. Mauris ipsum eros, laoreet dignissim elementum ac, viverra sed est. Aenean aliquet tempor justo, non hendrerit massa convallis ac. Aenean volutpat consectetur ex, a sodales sem tincidunt et. Donec volutpat ante eu odio ornare malesuada. Sed dignissim purus lacinia tempor sagittis. Nam quis arcu massa. Nam neque sem, dignissim sit amet congue quis, rutrum vel quam. Nunc ut porta sem. Maecenas suscipit lacus at interdum aliquam. In aliquam turpis eget arcu faucibus, sit amet vulputate purus ornare. Fusce vitae nisi odio. Nunc eget bibendum magna, eget eleifend massa. Nullam eu dui at nunc eleifend lacinia tincidunt a lorem. Pellentesque egestas fermentum est, vitae rutrum turpis rhoncus quis. Etiam in rhoncus tellus. Morbi tellus erat, laoreet at lectus sed, efficitur vestibulum lorem. Fusce tempus, quam nec feugiat ornare, velit nisl ultricies tortor, id elementum ex lectus et sem. Donec ornare ante sed elit sollicitudin tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent in neque aliquam, blandit purus id, consequat ex. Quisque efficitur orci nunc, a sodales sapien vehicula et. Proin dignissim facilisis felis, sit amet placerat odio vehicula sed. Quisque vulputate eros magna, nec scelerisque augue auctor id. Pellentesque mi elit, malesuada imperdiet efficitur luctus, scelerisque nec nisi. Nulla eget volutpat elit, in ornare lacus. Suspendisse sit amet lacus nec ipsum luctus semper. Mauris ipsum eros, laoreet dignissim elementum ac, viverra sed est. Aenean aliquet tempor justo, non hendrerit massa convallis ac. Aenean volutpat consectetur ex, a sodales sem tincidunt et. Donec volutpat ante eu odio ornare malesuada. Sed dignissim purus lacinia tempor sagittis. Nam quis arcu massa. Nam neque sem, dignissim sit amet congue quis, rutrum vel quam. Nunc ut porta sem. Maecenas suscipit lacus at interdum aliquam. In aliquam turpis eget arcu faucibus, sit amet vulputate purus ornare. Fusce vitae nisi odio. Nunc eget bibendum magna, eget eleifend massa. Nullam eu dui at nunc eleifend lacinia tincidunt a lorem. Pellentesque egestas fermentum est, vitae rutrum turpis rhoncus quis. Etiam in rhoncus tellus. Morbi tellus erat, laoreet at lectus sed, efficitur vestibulum lorem. Fusce tempus, quam nec feugiat ornare, velit nisl ultricies tortor, id elementum ex lectus et sem. Donec ornare ante sed elit sollicitudin tempor.
</div>

<div id="div3">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent in neque aliquam, blandit purus id, consequat ex. Quisque efficitur orci nunc, a sodales sapien vehicula et. Proin dignissim facilisis felis, sit amet placerat odio vehicula sed. Quisque vulputate eros magna, nec scelerisque augue auctor id. Pellentesque mi elit, malesuada imperdiet efficitur luctus, scelerisque nec nisi. Nulla eget volutpat elit, in ornare lacus. Suspendisse sit amet lacus nec ipsum luctus semper. Mauris ipsum eros, laoreet dignissim elementum ac, viverra sed est. Aenean aliquet tempor justo, non hendrerit massa convallis ac. Aenean volutpat consectetur ex, a sodales sem tincidunt et. Donec volutpat ante eu odio ornare malesuada. Sed dignissim purus lacinia tempor sagittis. Nam quis arcu massa. Nam neque sem, dignissim sit amet congue quis, rutrum vel quam. Nunc ut porta sem. Maecenas suscipit lacus at interdum aliquam. In aliquam turpis eget arcu faucibus, sit amet vulputate purus ornare. Fusce vitae nisi odio. Nunc eget bibendum magna, eget eleifend massa. Nullam eu dui at nunc eleifend lacinia tincidunt a lorem. Pellentesque egestas fermentum est, vitae rutrum turpis rhoncus quis. Etiam in rhoncus tellus. Morbi tellus erat, laoreet at lectus sed, efficitur vestibulum lorem. Fusce tempus, quam nec feugiat ornare, velit nisl ultricies tortor, id elementum ex lectus et sem. Donec ornare ante sed elit sollicitudin tempor.
</div>

Answer 1

如果性能是问题所在，您是否尝试过根本不构造other，而只是定义百分比，关闭.not(this)<上的滚动 元素，然后使用 $divs.not(this).scrollTop = Percentage * ($divs.not(this).scrollHeight - $divs.not(this).offsetHeight)?