滚动同步的两个 div 的动态负载

Posted 2023-05-07

【中文标题】滚动同步的两个 div 的动态负载

【英文标题】：Dynamical load of two divs that are synchronized in scrolling

【发布时间】：2021-04-10 15:28:51

【问题描述】：

我已经分别计算出“动态加载”和“两个 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），并且它确实在滚动时加载了更多数据，但我遇到了两个问题：

它一次加载其余数据，而不是每次触底时逐渐增加 5 个， syncscroll 停止工作，动态加载仅适用于 div2，而 div1 已冻结

这是我第一次尝试大型项目所需的 javascript，我敢肯定它看起来很乱。我会很感激你的帮助。谢谢！

【参考方案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/

这是一个正确定义所有变量并将滚动函数分配给特定变量的问题（我之前混合了它们，因此它只工作了一半）。