19

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

Now it does what I need:

  1. One big div that scrolls only vertically
  2. 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?

3 Answers 3

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>

6
  • 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
    Commented Aug 20, 2012 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. Commented Aug 20, 2012 at 14:32
  • Ok, I got it to work here: jsfiddle.net/CrN6X/3 But still stugling to get it to work inside my code :)
    – Peon
    Commented Aug 20, 2012 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: stackoverflow.com/questions/1326570/… Commented Aug 20, 2012 at 15:07
  • 1
    Here is a jsfiddle, although modified a little: jsfiddle.net/zoldello/okeeaf41
    – Phil
    Commented Jun 29, 2016 at 22:42
24

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>

0
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.

4
  • 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
    Commented Aug 20, 2012 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
    Commented Aug 20, 2012 at 14:12
  • @DainisAbols What would be the other half then?
    – Nebula
    Commented Aug 20, 2012 at 14:34
  • Is all ok now, both scrollbars synchronize. Thanx a lot m8.
    – Peon
    Commented Aug 20, 2012 at 16:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.