同步滚动3(+）个元素

synchronized scrolling for 3(+) elements?

本文关键字：元素 滚动 同步      更新时间：2024-01-20

我正试图使用下面的代码作为启动点来实现两个以上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>

如果性能是问题所在，您是否尝试过完全不构建other，只定义percentage，关闭.not(this)元素上的滚动，然后使用$divs.not(this).scrollTop = percentage * ($divs.not(this).scrollHeight - $divs.not(this).offsetHeight)？

由于您引用了多个div，因此需要将scrollTop应用于其中的每一个。在当前代码中，您将编写other.get(0)，它只针对第一个同级。

我在下面重写了您的代码，以便对兄弟数组进行迭代。链接如下：http://jsfiddle.net/84oz9boL/16/

var $divs = $('#div1, #div2, #div3');
var sync = function(e){
    var $other = $divs.not(this).off('scroll'), 
        percentage = this.scrollTop / (this.scrollHeight - this.offsetHeight);
    $other.each(function (index, other) {
        other.scrollTop = percentage * (other.scrollHeight - other.offsetHeight);
    });
    setTimeout( function(){ $other.on('scroll', sync ); },10);
}
$divs.on( 'scroll', sync);
相关文章：