确定视口滚动条的位置

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

});