Dynamical load of two divs that are synchronized in scrolling

Question

I have figured out 'dynamical load' and 'synchronized scroll of two divs' separately, but now I'd like to combine them. Simple 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>

Synchronized scroll works with this :

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

And I'm trying to load the page dynamically with:

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

It does show up the initial size of the two divs (here 5) and it does load more data on scroll, but I've got two problems:

it loads the rest of the data at once, not gradually adding 5 more every time I hit bottom,
syncscroll stopped working and dynamical load only works for div2, while div1 is frozen

This is my very first attempt in Javascript needed for a larger project, I'm sure it looks messy. I would appreciate your help. Thanks!

score 0 · Answer 1 · answered Apr 25 '21 at 17:39

If anyone had a similar problem here's my solution. Not a clean one (I don't know js well), but works.

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/

It was a matter of a correct definition of all variables and assigning scroll functions to a specific one (I mixed them before thus it worked just half way).

Dynamical load of two divs that are synchronized in scrolling

1 Answers1