Question

我正在使用Addazle React grid。我需要实现无限滚动，但该网格没有实现。所以我必须提出我的解决方案。对于这项任务，我需要了解以下内容：

滚动事件处理程序上的网格。我有它，它正常发射。
找出React元素上滚动条的位置。我需要弄清楚如何做到这一点。

我的想法是找出滚动条的位置，如果是最后一个，则在网格中加载更多项目。我正在考虑使用JQuery来完成任务。这是呈现的html：

<div class="react-grid-Viewport" style="overflow: hidden; position: absolute;" data-reactid="1"> <div style="position: absolute;overflow-x: auto;overflow-y: scroll; transform: translate3d(0px, 0px, 0px);">
 <div style="width:1040px;overflow:hidden;">          
      <!--Items in the grid are stored here as divs-->
      <!--Item One-->
      <div style="background-color:#fff;">
          <div>

          </div>
      </div>
      <!--Item Two-->
      <div style="background-color:#fff;">
          <div>

          </div>
      </div>
       <!--Item t-->
      <div style="background-color:#fff;">
          <div>

          </div>
      </div>
 </div>

Answer 1

当您滚动到底部时，滚动条的位置是最后一个，即不再有滚动可用。我们首先需要将最大可滚动量存储在变量中：

var maxscroll = $(".react-grid-viewport").height() - $(".react-grid-viewport > div").eq(0).height();

现在你可以使用当容器div的scrollTop等于maxscrollable数量时，从后端加载更多项目的条件：

$(".react-grid-viewport").scroll(function(){
   var maxscroll = $(".react-grid-viewport").height() - $(".react-grid-viewport > div").eq(0).height();

  if($(this).scrollTop() == maxscroll) {
    console.log("Load the next 10 items from the back end");
  }

});

确定视口滚动条

1 个答案: