How to synchronize two scrollbars for divs

Question

I have this code for file compares: http://jsfiddle.net/CrN6X/

Now it does what I need:

One big div that scrolls only vertically
Two smaller dives that scroll only horizontally

This way I can compare my files pretty easy, but I have one problem: the bottom scrollbars are accessable only when I scroll all the way down.

How can I make them float or move the scrollbar to another div, that can bee seen always, so that I don't need to scroll down the other div all the way to the bottom to access them?

score 27 · Accepted Answer · edited Jun 12 '18 at 13:39

27

The javascript in this is what you need really, but I added the html so you can see it in action.

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

<div id="div1" style="float:left;overflow:auto;height:100px;width:200px;">
  <p>lulz</p>
  <p>lulz</p>
  <p>lulz</p>
  <p>lulz</p>
</div>

<div id="div2" style="float:right;overflow:auto;height:100px;width:200px;">
  <p>lulz</p>
  <p>lulz</p>
  <p>lulz</p>
  <p>lulz</p>
</div>

edited Jun 12 '18 at 13:39

eisbehr

12,243
7
38
63

answered Aug 20 '12 at 14:09

Ryan McDonough

9,732
3
55
76

hmm... as far as I see, that script only let's me scroll both divs at the same time ( which is good ), but how do I get the scrollbars underneath the big div? – Peon Aug 20 '12 at 14:20
If there is content to scroll horizontal then it will scroll horizontal. Your code has no JS in JS fiddle, which is why it isn't working. Take that code, put in a html document on your computer, keep the JS in there and edit the CSS and it will work for you. – Ryan McDonough Aug 20 '12 at 14:32
Ok, I got it to work here: http://jsfiddle.net/CrN6X/3/ But still stugling to get it to work inside my code :) – Peon Aug 20 '12 at 14:57
That seems to look as what you need for this project, both lower bars are showing and the scroll matches as it goes? If you want to hide the vertical scroll bar on the left div you should follow: http://stackoverflow.com/questions/1326570/how-to-disable-browser-or-element-scrollbar-but-allow-scrolling-with-wheel-or-a – Ryan McDonough Aug 20 '12 at 15:07
Nea, actually this is even better, especially, when the texts differ. Thanx a lot m8. – Peon Aug 20 '12 at 16:08
1

Here is a jsfiddle, although modified a little: https://jsfiddle.net/zoldello/okeeaf41/ – Phil Jun 29 '16 at 22:42

score 24 · Answer 2 · answered Mar 22 '18 at 03:35

To avoid scrolling lags effect when using the mousewheel to scroll, we need to disable the second scroll event trigger. Check my approach below:

  var ignoreScrollEvents = false
  function syncScroll(element1, element2) {
    element1.scroll(function (e) {
      var ignore = ignoreScrollEvents
      ignoreScrollEvents = false
      if (ignore) return

      ignoreScrollEvents = true
      element2.scrollTop(element1.scrollTop())
    })
  }
  syncScroll($("#div1"), $("#div2"))
  syncScroll($("#div2"), $("#div1"))

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

<div id="div1" style="float:left;overflow:auto;height:100px;width:200px;">
  <p>lulz</p>
  <p>lulz</p>
  <p>lulz</p>
  <p>lulz</p>
</div>

<div id="div2" style="float:right;overflow:auto;height:100px;width:200px;">
  <p>lulz</p>
  <p>lulz</p>
  <p>lulz</p>
  <p>lulz</p>
</div>

score 2 · Answer 3 · answered Aug 20 '12 at 14:07

2

No, the scrollbar is placed inside your smaller div's. These scrollbars are locked to the bottom of your div so that won't work.

What you can do is make two javascript scrollbars under your big div and disable the default scrollbar altogether. Then you have your scrollbars visible always. If you want to go for the extra mile this also allows you to couple the scrollbars so that both the left and the right window scroll to the same position allowing for a better comparison.

answered Aug 20 '12 at 14:07

Nebula

1,045
2
11
24

That sounds exactly what I'm looking for. Can you provide a link on tutorial or something that shows how I can do it? I mean one big scrollbar on bottom that would scroll both divs would be perfect. – Peon Aug 20 '12 at 14:09
@DainisAbols Seems like someone beat me to it ;-) Checkout Ryans answer for the implementation. Bu feel free to upvote my answer if you found it useful ;-) – Nebula Aug 20 '12 at 14:12
@DainisAbols What would be the other half then? – Nebula Aug 20 '12 at 14:34
Is all ok now, both scrollbars synchronize. Thanx a lot m8. – Peon Aug 20 '12 at 16:07

How to synchronize two scrollbars for divs

3 Answers3

Linked