在ReactJS中使用Vanilla JS检测滚动页面的底部

Question

我正在开发React应用程序，并希望使用Vanilla JS在用户滚动条上检测页面底部。我用Google搜索出来，发现下面的检查在大多数情况下都能正常工作-

window.innerHeight + window.scrollY) >= document.body.offsetHeight

当我在React应用程序中未在App.css和index.css中将高度设置为100vh时，它的工作正常。但是在将两者的高度都设置为100vh之后，就没有了。

我正在安慰上面参数的值没有高度为100vh，下面是Galaxy S5设备的输出-

window.innerHeight->  640 window.scrollY -> 0 document.body.offsetHeight->  265

使以上参数的值高度为100vh及以下是Galaxy S5设备的输出-

window.innerHeight->  640 window.scrollY -> 0 document.body.offsetHeight->  640

下面是handleScroll代码：

  handleScroll = () => {
    const {
      totalUsersCount, users, currentPage, fetchUsersList,
    } = this.props;
    console.log('window.innerHeight-> ', window.innerHeight, 'window.scrollY ->', window.scrollY,
      'document.body.offsetHeight-> ', document.body.offsetHeight);
    if (((window.innerHeight + window.scrollY) >= document.body.offsetHeight)) {
      fetchUsersList(currentPage + 1);
    }
  };

[当我在React中进行设置时，在Vanilla JS中将高度设置为100vh时，如何检查页面滚动的底部？

Answer 1

当您将主体高度设置为100vh时，无论实际内容的总长度是多少，scrollHeight都将保持窗口的高度。 scrollHeight实际上并没有返回整个内容的高度（正如您所期望的那样），但是它可以滚动的可见空间。

您想要的不是height CSS属性值，而是max-height。

尝试将CS​​S更改为

body {
  /* height: 100vh; */
  max-height: 100vh;
  overflow: auto;
}

此外，我也不认为依靠窗口高度是一件好事，因为您以后可能要包装可滚动区域（例如，通过添加标题），因此您将失去一些额外的重量并且可能会出错在您的计算中。如果您对处理滚动的元素（包含滚动条的元素）具有引用（无论是在React中还是在具有原始DOM解析的情况下），都可以在滚动功能中使用以下测试：

handleScroll = () => {
  //...
  if (target.scrollTop >= (target.scrollHeight - target.offsetHeight)) {
    //... your stuff
  }
}

由于现在身体是您的目标，所以您可以：

handleScroll = () => {
  //...
  if (document.body.scrollTop >= (document.body.scrollHeight - document.body.offsetHeight)) {
    //... your stuff
  }
}

Answer 2

您需要使用document.body.scrollHeight来获取实际的高度。

参考：https://javascript.info/size-and-scroll-window#width-height-of-the-document

更新：对于特定元素，请使用任何选择器并获取其滚动高度。

const el = document.getElementById('#id');
if(el.scrollHeight){
   // do your stuff here
}