Scroll finish

for Olya

by Doeke Wartena

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<section id="left">
  <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam turpis leo, semper id sem nec, volutpat sodales felis. Donec pharetra felis quis arcu vehicula lobortis. Nunc venenatis accumsan magna nec posuere. Morbi facilisis vulputate hendrerit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse ipsum felis, euismod sit amet mattis at, consectetur ac nisi. Vivamus pellentesque laoreet tellus et condimentum. Mauris lobortis nunc ornare mi facilisis convallis. Vivamus tincidunt cursus suscipit. Maecenas in enim eget leo molestie accumsan. Praesent consectetur varius rutrum. Integer tincidunt arcu id mi feugiat lacinia. Vivamus eros nibh, pharetra nec convallis eu, pretium ut sem. Integer sed porttitor erat. Morbi maximus tempor aliquet.

Sed aliquam imperdiet libero, et euismod orci placerat eget. Nam non metus erat. Integer varius et felis ut ullamcorper. Cras pulvinar libero mauris, quis laoreet augue euismod a. Nulla eget gravida nisl. Nunc sollicitudin, ipsum vel pulvinar maximus, tortor lacus scelerisque erat, non semper quam turpis sit amet arcu. In hac habitasse platea dictumst. Vivamus rutrum feugiat sapien in euismod. Vestibulum et risus euismod, dictum libero sed, congue tellus. Aenean mattis magna nec dignissim varius. Sed tempus elit nec auctor elementum.

Nunc elementum libero ut sodales iaculis. Sed ut condimentum nisl. In hac habitasse platea dictumst. Cras nulla ex, tempus id vehicula nec, bibendum quis augue. Duis facilisis eros et dui faucibus, in scelerisque diam condimentum. Morbi vestibulum vehicula lacus at blandit. In blandit tortor vel erat malesuada, ut cursus ipsum iaculis. Fusce sodales eget nisl nec convallis. Ut condimentum, nisl quis lobortis varius, tortor sapien maximus turpis, et efficitur ante sapien a arcu.

Sed et felis venenatis, pharetra nunc ut, interdum ante. Pellentesque ut urna...

CSS

#left {
  background-color: red;
  width: 50%;
  height: 300px;
  float: left;
  overflow: scroll;
}
#right {
  background-color: green;
  width: 50%;
  height: 200px;
  float: left;
  overflow: scroll;
}

::-webkit-scrollbar { 
    display: none; 
}

JavaScript

$("#left").on("scroll", function() {

  var s = $(this).scrollTop();
  var w = $(this).height();
  var c = $(this)[0].scrollHeight;
  // get the progress between 0 and 1 
  var t = s / (c-w);  
  //console.log(t);
  
  // if we do scroll this one ourself then we would like
  // to scroll the other one based on this one
  if ($(this).is(":hover")) {
  	// scroll the other one according to how far we are with this one
    $("#right").scrollTop(($("#right")[0].scrollHeight - $("#right").height() ) * t);    
  }
  
});


$("#right").on("scroll", function() {

  var s = $(this).scrollTop();
  var w = $(this).height();
  var c = $(this)[0].scrollHeight;
  // get the progress between 0 and 1 
  var t = s / (c-w);  
  //console.log(t);
  
  // if we do scroll this one ourself then we would like
  // to scroll the other one based on this one
  if ($(this).is(":hover")) {
  	// scroll the other one according to how far we are with this one
    $("#left").scrollTop(($("#left")[0].scrollHeight - $("#left").height() ) * t);    
  }
  
});