synchronizing scrolling between 2 divs

问题

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

回答1:

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

回答2:

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>

回答3:

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.

来源：https://stackoverflow.com/questions/11723886/synchronizing-scrolling-between-2-divs

标签

javascript

jquery