Dynamical load of synchronized

by thomastthai

HTML

<div id="div1" >
    <div class="div1_cell"> One line </div>
    <div class="div1_cell"> One line </div>
    <div class="div1_cell"> One line </div>
    <div class="div1_cell"> One line </div>
    <div class="div1_cell"> One line </div>
    <div class="div1_cell"> One line </div>
    <div class="div1_cell"> One line </div>
    <div class="div1_cell"> One line </div>
    <div class="div1_cell"> One line </div>
    <div class="div1_cell"> One line </div>
    <div class="div1_cell"> One line </div>
    <div class="div1_cell"> One line </div>
    <div class="div1_cell"> One line </div>
    <div class="div1_cell"> One line </div>
    <div class="div1_cell"> One line </div>
    <div class="div1_cell"> One line </div>
    <div class="div1_cell"> One line </div>
    <div class="div1_cell"> One line </div>
    <div class="div1_cell"> One line </div>
    <div class="div1_cell"> One line </div>
    <div class="div1_cell"> One line </div>
    <div class="div1_cell"> One line </div>
    <div class="div1_cell"> One line </div>
    <div class="div1_cell"> One line </div>
    <div class="div1_cell"> One line </div>
    <div class="div1_cell"> One line </div>
    <div class="div1_cell"> One line </div>
    <div class="div1_cell"> One line </div>
    <div class="div1_cell"> One line </div>
    <div class="div1_cell"> One line </div>
    <div class="div1_cell"> One line </div>
    <div class="div1_cell"> One line </div>
    <div class="div1_cell"> One line </div>
    <div class="div1_cell"> One line </div>
    <div class="div1_cell"> One line </div>
    <div class="div1_cell"> One line </div>
    <div class="div1_cell"> One line </div>
    <div class="div1_cell"> One line </div>
    <div class="div1_cell"> One line </div>
    <div class="div1_cell"> One line </div>
    <div class="div1_cell"> One line </div>
    <div class="div1_cell"> One line </div>
    <div class="div1_cell"> One line </div>
    <div class="div1_cell"> One line </div>
    <div class="div1_cell"> One line </div>
...

CSS

#div1 {
  background-color: orange;
  height: 300px;
  width: 50%;
  float: left;
  overflow-y: scroll;
}

#div2 {
  background-color: purple;
  height: 300px;
  width: 50%;
  float: left;
  overflow-y: scroll;
}

.div1_cell {
  padding: 5px;
  border-bottom: solid 1px;
}

.div2_cell {
  padding: 5px;
  border-bottom: solid 1px;
}

JavaScript

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

$(document).ready(function () {
  size_div1 = $("#div1 .div1_cell").length;
  size_div2 = $("#div2 .div2_cell").length;
  x=11;
  $('#div1 .div1_cell').hide();
  $('#div1 .div1_cell:lt('+x+')').show();
  $('#div2 .div2_cell').hide();
  $('#div2 .div2_cell:lt('+x+')').show();
  
  div1 = document.getElementById('div1');
  div2 = document.getElementById('div2');
  
  div1.onscroll = function() {
    if(div1.scrollTop + div1.clientHeight == div1.scrollHeight) {
        x=(x+5 <= size_div1) ? x+5 : size_div1;
        $('#div1 .div1_cell:lt('+x+')').show();
        x=(x+5 <= size_div2) ? x+5 : size_div2;
        $('#div2 .div2_cell:lt('+x+')').show();
    }
}
});