synchronizing scrolling between 2 divs

Question

I saw this post and tried to copy it but it didn't work - Syncing scrolling

I have a TabContainer with 2 tabs that have divs, bmrDetailDataDiv and residentDetailDataDiv.

Here is my javscript code -

window.onload = function () {
  var bmrDetailDiv = $("div[id$='_bmrDetailDataDiv']")[0];
  var residentDetailDiv = $("div[id$='_residentDetailDataDiv']")[0];

  if ((bmrDetailDiv) && (residentDetailDiv)) {
      bmrDetailDiv.on('scroll', function () {
          residentDetailDiv.scrollTop(bmrDetailDiv.scrollTop());
      });

      residentDetailDiv.on('scroll', function () {
          bmrDetailDiv.scrollTop(residentDetailDiv.scrollTop());
      });
}

Am I missing something?

EDIT -

Tried this and get an error -

$(document).ready(function () {
   var bmrDetailDiv = $("div[id$='_bmrDetailDataDiv']");
  var residentDetailDiv = $("div[id$='_residentDetailDataDiv']");
  if (bmrDetailDiv.length && residentDetailDiv.length) {
      bmrDetailDiv.on('scroll', function () {
          residentDetailDiv.scrollTop($(this).scrollTop()); 
      });
      residentDetailDiv.on('scroll', function () {
          bmrDetailDiv.scrollTop($(this).scrollTop());
      });
  } 
});

EDIT #2 -

Tried this and still getting JScript error. This is all within my .js file that get's included at the top of the page. -

jQuery.fn.exists = function () { return this.length > 0; }

$(function () {
    var combined = $("div[id$='_bmrDetailDataDiv']").add($("div[id$='_residentDetailDataDiv']"));

    if (combined.exists()) {
        //Getting error on below line
        combined.on("scroll", function () {
          combined.scrollTop($(this).scrollTop());
    });
  }
});

score 3 · Accepted Answer · answered Jul 30 '12 at 14:51

Always check the console - that will cause errors because you are attempting to use jQuery methods on native elements (since you retrieved them via [0]). If you were doing this purely for the sake of the if condition, there's no need - to check the selectors found elements, you can just query the length property.

$(function() {
    var bmrDetailDiv = $("div[id$='_bmrDetailDataDiv']");
    var residentDetailDiv = $("div[id$='_residentDetailDataDiv']");

    if (bmrDetailDiv.length && residentDetailDiv.length) {

        bmrDetailDiv.on('scroll', function () {
            residentDetailDiv.scrollTop($(this).scrollTop());
        });
        residentDetailDiv.on('scroll', function () {
            bmrDetailDiv.scrollTop($(this).scrollTop());
        });

    }
});

Other changes:

1) Document ready handler instead of window.onload

2) Use of $(this) inside event callback

I put everything in my document.ready function and I am getting this error message - Microsoft JScript runtime error: Object doesn't support this property or method. See my edits for the changes I made. — duckmike, Jul 30 '12 at 15:02
Ouch - what browser are you running that in? How about in something like Opera or Firefox? — Mitya, Jul 30 '12 at 15:08

score 1 · Answer 2 · answered Aug 13 '18 at 21:19

The syncscroll library might make the job easier for the next person needing this ...

https://github.com/asvd/syncscroll

$ bower install syncscroll

<script src="path/to/syncscroll.js"></script>```

<div class=syncscroll name=myElements>
  First big text goes here...
</div>

<div class=syncscroll name=myElements>
  Second big text goes there...
</div>

Now the elements will be scrolled simultaneously. Keep in mind that scrolling is synchronized proportionally, and not by amount of pixels.

If you update a set of synchronized elements by changing the classes or attributes, invoke syncscroll.reset() to update the listeners.

Oscar Jara · Answer 3 · 2012-07-30T15:20:51.737

A short way to do what you need:

Live DEMO: http://jsfiddle.net/oscarj24/gqHyW/1/

jQuery.fn.exists = function(){return this.length>0;}

$(function() {
    var combined = $("div[id$='_bmrDetailDataDiv']").add($("div[id$='_residentDetailDataDiv']"));

    if (combined.exists()) {
        combined.on("scroll", function () {
            combined.scrollTop($(this).scrollTop());
        });
    }
});

Full Code

Save it as index.htm :-)

<html>
<head>
<title>Synchronizing scrolling between 2 divs</title>
</head>
<style>
  div {
    position : absolute;
    top      : 0;
    width    : 50%;
    height   : 300px;
  }
  .top {
    overflow : hidden;
    left     : 0;
  }
  .bottom {
    left     : 50%;
    overflow : scroll;
  }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
jQuery.fn.exists = function(){return this.length>0;}

$(function() {
    var combined = $("div[id$='_bmrDetailDataDiv']").add($("div[id$='_residentDetailDataDiv']"));

    if (combined.exists()) {
        combined.on("scroll", function () {
            combined.scrollTop($(this).scrollTop());
        });
    }
});
</script>
<body>
  <div id="1_bmrDetailDataDiv" class="top">
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>10th P Tag</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>20th P Tag</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>30th P Tag</p>
  </div>
  <div id="2_residentDetailDataDiv" class="bottom">
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>10th P Tag</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>20th P Tag</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>30th P Tag</p>
  </div>
</body>
</html>

where do I put this function? In window.onload? like window.onload = function() { var combined...etc. }, or somewhere else? — duckmike, Jul 30 '12 at 15:12
see my edits. I include it in my js file that I include on my page. — duckmike, Jul 30 '12 at 15:25
Does it make a difference that both of my div's overflow properties have to be set to scroll? — duckmike, Jul 30 '12 at 15:34
Yes.. ehmm, which IE version are you using? Just to know I tested on IE7, IE8 and everything works good. — Oscar Jara, Jul 30 '12 at 15:41
I am in IE8. Both have to be set to scroll because there is a 3rd div involved. On on the left for personal information. 2 on the right that sync to the one on the left. The one on the left's overflow is set to hidden. — duckmike, Jul 30 '12 at 15:59

synchronizing scrolling between 2 divs

3 Answers3

Full Code

Linked