JavaScript - Synchronize Two Scroll Areas

From NoskeWiki
Jump to navigation Jump to search
Demonstration of scrolling two areas

About

NOTE: This page is a daughter page of: JavaScript and CSS


To synchronize two scroll bars is actually pretty easy. Here's the javascript code: 

function SyncScroll(div) {
    var div1 = document.getElementById("div1");
    div1.scrollTop = div.scrollTop;
}

And the HTML: 

<div id="div1">Mycontent 1</div>
<div id="div2" onscroll="SyncScroll(this)">Mycontent 2</div>

Below is a more full example where either scroll bar controls the other:


Synchronize Two Scroll Areas

synchronized_scroll_areas.html: 

<!doctype html>
<html lang="en">
<head>
  <title>Syncronized Scroll Areas</title>

<script>
function SyncScroll(phoneFaceId) {
  var face1 = document.getElementById("phoneface1");
  var face2 = document.getElementById("phoneface2");
  if (phoneFaceId=="phoneface1") {
    face2.scrollTop = face1.scrollTop;
  }
  else {
    face1.scrollTop = face2.scrollTop;
  }
}
</script>

<style>
.phone-image {
  object-fit: cover;       /* Scale the image so it covers whole area, thus will likely crop */
  object-position: center; /* Center the image within the element */
  height: 300px;
  width: 460px;
}

.phone-bg {
  position: relative;
  height: 1050px;
  width: 530px;
  background-image: url('nexus_6_transparent.png');
  background-repeat: no-repeat;
  background-position: center; 
}

.phone-face {
  position: absolute;
  left: 27px;
  top: 88px;
  height: 840px;
  width: 475px;
  overflow-y: scroll;
  padding: 5px 0px 0px 0px;  /* Tiny bit of padding up top */
}

</style>
</head>
<body>

<table width=100%>
<tr>
<td width=50%>

<div class="phone-bg" id="phonebg">
<div class="phone-face" id="phoneface1" onscroll="SyncScroll('phoneface1')">
<img class="phone-image" src="https://lh3.ggpht.com/-KQolgntlXlw/VOzmp3e5gfI/AAAAAAAAABo/ko9kvPwH08E/s400/"/><br>
<img class="phone-image" src="https://lh3.ggpht.com/-jb4LBIk_k1k/T-H2LUKtulI/AAAAAAAEQGs/XJ-XU9wndaQ/s400/"/><br>
<img class="phone-image" src="https://static.panoramio.com.storage.googleapis.com/photos/large/44693443.jpg"/><br>
<img class="phone-image" src="https://lh3.ggpht.com/-kx-lwzq5SrM/UToSU0_pkxI/AAAAAAABSVI/ZKKtGzs7QTQ/s400/"/><br>
</div>
</div>

</td>
<td width=50%>

<div class="phone-bg" id="phonebg">
<div class="phone-face" id="phoneface2" onscroll="SyncScroll('phoneface2')">
<img class="phone-image" src="http://static.panoramio.com/photos/large/44693443.jpg"/><br>
<img class="phone-image" src="https://static.panoramio.com.storage.googleapis.com/photos/large/97495389.jpg"/><br>
<img class="phone-image" src="https://static.panoramio.com.storage.googleapis.com/photos/large/8392703.jpg"/><br>
<img class="phone-image" src="https://lh3.ggpht.com/-KQolgntlXlw/VOzmp3e5gfI/AAAAAAAAABo/ko9kvPwH08E/s400/"/><br>
</div>
</div>

</td>
</tr>
</table>

</body>
</html>


Image used in background: "nexus_6_transparent.png"


Code license
For all of the code on my site... if there are specific instruction or licence comments please leave them in. If you copy my code with minimum modifications to another webpage, or into any code other people will see I would love an acknowledgment to my site.... otherwise, the license for this code is more-or-less WTFPL (do what you want)! If only copying <20 lines, then don't bother. That said - if you'd like to add a web-link to my site www.andrewnoske.com or (better yet) the specific page with code, that's a really sweet gestures! Links to the page may be useful to yourself or your users and helps increase traffic to my site. Hope my code is useful! :)



See Also

Retrieved from "http://andrewnoske.com/w/index.php?title=JavaScript_-_Synchronize_Two_Scroll_Areas&oldid=455"