代码之家 › 专栏 › 技术社区 › Shantanu Tomar

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

dom reactjs css html javascript

Shantanu Tomar · 技术社区 · 5 年前

我正在开发一个React应用程序,希望使用Vanilla JS检测用户滚动页面的底部。我在谷歌上搜索了一下,发现下面的检查对大多数场景都很有效-

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

当Vanilla JS中的高度设置为100vh时,我如何检查页面滚动的底部,就像我在React中一样。

1 回复 | 直到 5 年前

KawaLo 5 年前

当您将body height设置为100vh时,scrollHeight将保持窗口的高度,无论内容的总长度是多少。scrollHeight实际上不会返回整个内容的高度(如您所期望的),而是返回它可以滚动的可见空间。

你想要的不是 height css属性值,但 max-height .

尝试将css更改为

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

此外,我认为依赖窗口高度来实现这一点并不好,因为你可能以后想包裹你的可滚动区域(例如添加一个标题),这样你会损失一些额外的重量,并可能在计算中出错。如果你有一个对处理滚动条的元素(包含滚动条的那个)的引用(无论是在React中还是在vanilla DOM解析中),你可以在滚动函数中使用以下测试:

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

因为现在身体是你的目标,你可以:

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

Vivek Singh Thakur 5 年前

你需要使用 document.body.scrollHeight 以获得实际高度。

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

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

const el = document.getElementById('#id');
const scrollHeight = el.scrollHeight;