Synchronizing Scrolling Between 2 Divs
Solution 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
Solution 2:
A short way to do what you need:
Live DEMO:http://jsfiddle.net/oscarj24/gqHyW/1/
jQuery.fn.exists = function(){returnthis.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><scripttype="text/javascript"src="http://code.jquery.com/jquery-1.7.2.min.js"></script><script>
jQuery.fn.exists = function(){returnthis.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><divid="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><divid="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>Solution 3:
The syncscroll library might make the job easier for the next person needing this ...
https://github.com/asvd/syncscroll
$ bower install syncscroll
<scriptsrc="path/to/syncscroll.js"></script>``` <divclass=syncscrollname=myElements> First big text goes here... </div><divclass=syncscrollname=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.
Post a Comment for "Synchronizing Scrolling Between 2 Divs"