Динамическая загрузка двух div, синхронизированных при прокрутке

Question

Я вычислил «динамическую загрузку» и «синхронизированную прокрутку двух div» по отдельности, но теперь я хотел бы их объединить. Простой HTML:

        <div id="div1">
    <div class="div1_cell"> One line </div>
    <div class="div1_cell"> One line </div>
    ...
  </div>
  <div id="div2" onscroll=SyncScroll(this)>
    <div class="div2_cell"> One line </div>
    <div class="div2_cell"> One line </div>
    ...
  </div>

Синхронизированная прокрутка работает с этим:

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

И я пытаюсь загрузить страницу динамически:

      $(document).ready(function () {
size_div1 = $("#div1 .div1_cell").size();
size_div2 = $("#div2 .div2_cell").size();
x=5;
$('#div1 .div1_cell:lt('+x+')').show();
$('#div2 .div2_cell:lt('+x+')').show();

div2 = document.getElementById('div2')

div2.onscroll = function() {
    if(div2.scrollTop + div2.clientHeight == div2.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();
    }
}
});

Он показывает начальный размер двух div (здесь 5) и загружает больше данных при прокрутке, но у меня две проблемы:

1. он загружает остальные данные сразу, не добавляя постепенно еще 5 каждый раз, когда я достигаю дна,
2. syncscroll перестала работать, и динамическая загрузка работает только для div2, а div1 заморожен

Это моя первая попытка использовать Javascript для большого проекта, я уверен, что это выглядит беспорядочно. Буду признателен за вашу помощь. Спасибо!

Answer 1

Если у кого-то была подобная проблема, вот мое решение. Не чистый (js плохо знаю), но работает.

      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();
    }
}
});

https://jsfiddle.net/astro_gosia/tp8q23y6/2/

Речь шла о правильном определении всех переменных и назначении функций прокрутки определенной (я смешивал их раньше, поэтому это сработало только наполовину).