26

我正在尝试DIV使用以下代码实现两个同步滚动。

演示

$(document).ready(function() {
    $("#div1").scroll(function () { 
        $("#div2").scrollTop($("#div1").scrollTop());
    });
    $("#div2").scroll(function () { 
        $("#div1").scrollTop($("#div2").scrollTop());
    });
});

#div1并且#div2内容相同但大小不同，例如

#div1 {
 height : 800px;
 width: 600px;
}
#div1 {
 height : 400px;
 width: 200px;
}

使用此代码，我面临两个问题。

1) 滚动没有很好地同步，因为 div 的大小不同。我知道，这是因为，我直接设置scrollTop值。我需要找到滚动内容的百分比并计算scrollTop其他的相应值div。我不确定，如何找到实际高度和当前滚动位置。

2) 此问题仅在firefox. 在 Firefox 中，滚动不像在其他浏览器中那样平滑。我认为这是因为上面的代码正在创建滚动事件的无限循环。我不确定，为什么这只发生在 Firefox 上。有没有办法找到滚动事件的来源，以便我可以解决这个问题。

任何帮助将不胜感激。

4

8 回答 8

49

您可以使用element.scrollTop / (element.scrollHeight - element.offsetHeight)来获取百分比（它将是 和 之间的值0）1。因此，您可以将其他元素乘以(.scrollHeight - .offsetHeight)该值以进行比例滚动。

为避免在循环中触发侦听器，您可以暂时取消绑定侦听器，设置scrollTop并重新绑定。

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);
    // Firefox workaround. Rebinding without delay isn't enough.
    setTimeout( function(){ $other.on('scroll', sync ); },10);
}
$divs.on( 'scroll', sync);

http://jsfiddle.net/b75KZ/5/

于 2013-09-23T06:54:26.200 回答
4

像发条一样运行（参见演示）

$(document).ready(function(){

  var master = "div1"; // this is id div
  var slave = "div2"; // this is other id div
  var master_tmp;
  var slave_tmp;
  var timer;

  var sync = function ()
  {
    if($(this).attr('id') == slave)
    {
      master_tmp = master;
      slave_tmp = slave;
      master = slave;
      slave = master_tmp;
    }

    $("#" + slave).unbind("scroll");

    var percentage = this.scrollTop / (this.scrollHeight - this.offsetHeight);

    var x = percentage * ($("#" + slave).get(0).scrollHeight - $("#" + slave).get(0).offsetHeight);

    $("#" + slave).scrollTop(x);

    if(typeof(timer) !== 'undefind')
      clearTimeout(timer);

    timer = setTimeout(function(){ $("#" + slave).scroll(sync) }, 200)
  }

  $('#' + master + ', #' + slave).scroll(sync);

});
于 2015-01-13T05:21:13.780 回答
3

这就是我正在使用的。只需syncScroll(...)使用要同步的两个元素调用该函数。我发现 pawel 的解决方案存在在鼠标或触控板实际完成操作后继续缓慢滚动的问题。

请参阅此处的工作示例。

// Sync up our elements.
syncScroll($('.scroll-elem-1'), $('.scroll-elem-2'));


/***
*   Synchronize Scroll
*   Synchronizes the vertical scrolling of two elements.
*   The elements can have different content heights.
*
*   @param $el1 {Object}
*       Native DOM element or jQuery selector.
*       First element to sync.
*   @param $el2 {Object}
*       Native DOM element or jQuery selector.
*       Second element to sync.
*/
function syncScroll(el1, el2) {
  var $el1 = $(el1);
  var $el2 = $(el2);

  // Lets us know when a scroll is organic
  // or forced from the synced element.
  var forcedScroll = false;

  // Catch our elements' scroll events and
  // syncronize the related element.
  $el1.scroll(function() { performScroll($el1, $el2); });
  $el2.scroll(function() { performScroll($el2, $el1); });

  // Perform the scroll of the synced element
  // based on the scrolled element.
  function performScroll($scrolled, $toScroll) {
    if (forcedScroll) return (forcedScroll = false);
    var percent = ($scrolled.scrollTop() / 
      ($scrolled[0].scrollHeight - $scrolled.outerHeight())) * 100;
    setScrollTopFromPercent($toScroll, percent);
  }

  // Scroll to a position in the given
  // element based on a percent.
  function setScrollTopFromPercent($el, percent) {
    var scrollTopPos = (percent / 100) *
      ($el[0].scrollHeight - $el.outerHeight());
    forcedScroll = true;
    $el.scrollTop(scrollTopPos);
  }
}
于 2014-11-19T01:51:14.567 回答
2

如果 div 的大小相同，那么下面的代码是同步滚动它们的简单方法：

scroll_all_blocks: function(e) {
        var scrollLeft = $(e.target)[0].scrollLeft;

        var len = $('.scroll_class').length;
        for (var i = 0; i < len; i++)
        {
            $('.scroll_class')[i].scrollLeft = scrollLeft;
        }

    }

这里我使用水平滚动，但你可以在这里使用 scrollTop。此函数是scroll在 div 上的事件上调用，因此e将可以访问事件对象。其次，您可以简单地计算要应用于此行的 div 的相应大小的比率$('.scroll_class')[i].scrollLeft = scrollLeft;

于 2013-10-01T11:38:10.743 回答
2

我通过将滚动百分比设置为定点表示法解决了同步滚动循环问题：percent.toFixed(0)，以 0 作为参数。这可以防止两个同步元素之间不匹配的分数滚动高度，这些元素不断地试图“赶上”彼此。这段代码最多可以让他们在一个额外的步骤之后赶上（即，在用户停止滚动后，第二个元素可能会继续滚动一个额外的像素）。不是完美的解决方案或最复杂的解决方案，但肯定是我能找到的最简单的解决方案。

var left = document.getElementById('left');
var right = document.getElementById('right');
var el2;
var percentage = function(el) { return (el.scrollTop / (el.scrollHeight - el.offsetHeight)) };

function syncScroll(el1) {
  el1.getAttribute('id') === 'left' ? el2 = right : el2 = left;
  el2.scrollTo( 0, (percentage(el1) * (el2.scrollHeight - el2.offsetHeight)).toFixed(0) ); // toFixed(0) prevents scrolling feedback loop
}

document.getElementById('left').addEventListener('scroll',function() {
  syncScroll(this);
});
document.getElementById('right').addEventListener('scroll',function() {
  syncScroll(this);
});
于 2019-02-25T00:12:00.263 回答
1

我喜欢 pawel 的干净解决方案，但它缺少我需要的东西，并且有一个奇怪的滚动错误，它会继续滚动，我的插件将在多个容器上工作，而不仅仅是两个。

http://www.xtf.dk/2015/12/jquery-plugin-synchronize-scroll.html

示例和演示：http ://trunk.xtf.dk/Project/ScrollSync/

插件：http ://trunk.xtf.dk/Project/ScrollSync/jquery.scrollSync.js

$('.scrollable').scrollSync();

于 2015-12-01T10:17:17.313 回答
1

如果您不想按比例滚动，而是希望在每个字段上滚动等量的像素，则可以将 change 的值添加到您将滚动事件绑定到的字段的当前值。

让我们说这#left是小领域，#right是更大的领域。

var oldRst = 0;

$('#right').on('scroll', function () {
    l = $('#left');
    var lst = l.scrollTop();
    var rst = $(this).scrollTop();

    l.scrollTop(lst+(rst-oldRst)); // <-- like this

    oldRst = rst;
});

https://jsfiddle.net/vuvgc0a8/1/

通过添加 change 的值，而不仅仅是将其设置为#right's scrollTop()，您可以在小字段中向上或向下滚动，而不管它scrollTop()是否小于较大的字段。这方面的一个例子是 Facebook 上的用户页面。

这是我来这里时需要的，所以我想我会分享。

于 2016-04-12T22:11:20.013 回答
0

从pawel解决方案（第一个答案）。

对于使用 jQuery 的水平同步滚动，这是解决方案：

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

$divs.on('scroll', sync);

JSFiddle

多个水平同步的 div 的另一个解决方案是这个，但它适用于具有相同宽度的 div。

var $divs = $('#div1, #div2, #div3'); //multiple divs
var sync = function (e) {
    var me = $(this);
    var $other = $divs.not(me).off('scroll');
    $divs.not(me).each(function (index) {
        $(this).scrollLeft(me.scrollLeft());
    });
    setTimeout(function () {
        $other.on('scroll', sync);
    }, 10);
}
$divs.on('scroll', sync);

注意：仅适用于具有相同宽度的 div

JSFiddle

于 2015-07-08T16:57:05.160 回答