Synchronized scrolling using jQuery?

Question

I am trying to implement synchronized scrolling for two DIV with the following code.

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

#div1 and #div2 is having the very same content but different sizes, say

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

With this code, I am facing two issues.

1) Scrolling is not well synchronized, since the divs are of different sizes. I know, this is because, I am directly setting the scrollTop value. I need to find the percentage of scrolled content and calculate corresponding scrollTop value for the other div. I am not sure, how to find the actual height and current scroll position.

2) This issue is only found in firefox. In firefox, scrolling is not smooth as in other browsers. I think this because the above code is creating a infinite loop of scroll events. I am not sure, why this is only happening with firefox. Is there any way to find the source of scroll event, so that I can resolve this issue.

Any help would be greatly appreciated.

somewhat similar question and my answer: http://stackoverflow.com/a/15344759/2000060 — darshanags, Oct 01 '13 at 04:24

score 49 · Accepted Answer · answered Sep 23 '13 at 06:54

49

You can use element.scrollTop / (element.scrollHeight - element.offsetHeight) to get the percentage (it'll be a value between 0 and 1). So you can multiply the other element's (.scrollHeight - .offsetHeight) by this value for proportional scrolling.

To avoid triggering the listeners in a loop you could temporarily unbind the listener, set the scrollTop and rebind again.

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/

answered Sep 23 '13 at 06:54

pawel

35,827
7
56
53

2

You can also use the jQuery.throttle plugin : https://github.com/cowboy/jquery-throttle-debounce – LeGEC Sep 26 '13 at 12:31
2

Is it possible to make div2 scroll horizontaly? – RafaSashi Nov 19 '14 at 10:32
2

@RafaSashi sure, just change `*Height` to `*Width` and `*Top` to `*Left` http://jsfiddle.net/b75KZ/102/ (edit: sorry, I thought you mean both horizontally, but it should be just as easy, just change `scrollLeft` based on `scrollTop` and vice-versa) – pawel Nov 19 '14 at 14:28
@pawel thanks I was more thinking about something like that http://jsfiddle.net/PvVdq/ in other words adapting your answer to this question http://stackoverflow.com/questions/18333085/move-div-horizontally-when-scroll-vertically-jquery-or-css3 – RafaSashi Nov 19 '14 at 14:31
@pawel I can open a new question and provide an example of what I would like to achieve if you think it worth it – RafaSashi Nov 19 '14 at 14:35
I wish I could upvote it more than once. Very nice trick with temporary unbinding event. – BroiSatse Jan 13 '15 at 22:34
1

I've created a version which resolves the bug and adds the ability to scroll across multiple containers, not just two: http://stackoverflow.com/a/34017855/63467 – Frost Dec 01 '15 at 10:18
They are floating bizzarly at the end, they continue moving – Gino Dec 30 '15 at 02:39

score 4 · Answer 2 · answered Jan 13 '15 at 05:21

Runs like clockwork (see DEMO)

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

});

Works great, even with mousewheel. – Manan Vaghasiya Jul 05 '17 at 06:27 — Manan Vaghasiya, Jul 05 '17 at 06:27

score 3 · Answer 3 · answered Nov 19 '14 at 01:51

This is what I'm using. Just call the syncScroll(...) function with the two elements you want to synchronize. I found pawel's solution had issues with continuing to slowly scroll after the mouse or trackpad was actually done with the operation.

See working example here.

// 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);
  }
}

score 2 · Answer 4 · answered Oct 01 '13 at 11:38

If the divs are of equal sizes then this code below is a simple way to scroll them synchronously:

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;
        }

    }

Here im using horizontal scroll, but you can use scrollTop here instead. This function is call on scroll event on the div, so the e will have access to the event object. Secondly, you can simply have the ratio of corresponding sizes of the divs calculated to apply in this line $('.scroll_class')[i].scrollLeft = scrollLeft;

gaspar_schott · Answer 5 · 2019-02-25T00:51:07.940

I solved the sync scrolling loop problem by setting the scroll percentage to fixed-point notation: percent.toFixed(0), with 0 as the parameter. This prevents mismatched fractional scrolling heights between the two synced elements, which are constantly trying to "catch up" with each other. This code will let them catch up after at most a single extra step (i.e., the second element may continue to scroll an extra pixel after the user stops scrolling). Not a perfect solution or the most sophisticated, but certainly the simplest I could find.

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);
});

score 1 · Answer 6 · answered Dec 01 '15 at 10:17

1

I like pawel's clean solution but it lacks something I need and has a strange scrolling bug where it continues to scroll and my plugin will work on multiple containers not just two.

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

Example & demo: http://trunk.xtf.dk/Project/ScrollSync/

Plugin: http://trunk.xtf.dk/Project/ScrollSync/jquery.scrollSync.js

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

answered Dec 01 '15 at 10:17

Frost

863
8
18

@Frost is there a non jquery version? – hipkiss Nov 02 '16 at 16:28

score 1 · Answer 7 · answered Apr 12 '16 at 22:11

If you don't want proportional scrolling, but rather to scroll an equal amount of pixels on each field, you could add the value of change to the current value of the field you're binding the scroll-event to.

Let's say that #left is the small field, and #right is the bigger field.

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/

By adding the value of change, and not just setting it equal to #right's scrollTop(), you can scroll up or down in the small field, regardless of its scrollTop() being less than the bigger field. An example of this is a user page on Facebook.

This is what I needed when I came here, so I thought I'd share.

somejhereandthere · Answer 8 · 2015-07-08T18:46:41.523

From the pawel solution (first answer).

For the horizzontal synchronized scrolling using jQuery this is the solution:

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

An other solution for multiple horizontally synchronized divs is this, but it works for divs with same width.

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);

NB: Only for divs with same width

JSFiddle

Synchronized scrolling using jQuery?

8 Answers8

Linked