javascript - 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 bined = $("div[id$='_bmrDetailDataDiv']").add($("div[id$='_residentDetailDataDiv']"));

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

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 bined = $("div[id$='_bmrDetailDataDiv']").add($("div[id$='_residentDetailDataDiv']"));

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

Share Improve this question edited May 23, 2017 at 12:29 CommunityBot 11 silver badge asked Jul 30, 2012 at 14:48 duckmike 1,0364 gold badges17 silver badges39 bronze badges

Add a ment |

3 Answers 3

Sorted by: Reset to default 4

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

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

https://github./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.

A short way to do what you need:

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

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

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

    if (bined.exists()) {
        bined.on("scroll", function () {
            bined.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./jquery-1.7.2.min.js"></script>
<script>
jQuery.fn.exists = function(){return this.length>0;}

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

    if (bined.exists()) {
        bined.on("scroll", function () {
            bined.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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - synchronizing scrolling between 2 divs - Stack Overflow

3 Answers 3

Full Code

与本文相关的文章

评论列表(0)