时间戳

首页 > 解决方案 > 使用 React 检测垂直页面溢出

javascript - 使用 React 检测垂直页面溢出

问题描述

我想通过浏览器窗口是否有垂直滚动条来有条件地渲染一个 div。我的renderElements方法从 API 中提取，结果各不相同。我尝试为我的 div 分配一个 ref 并将它的 scrollHeight 与它的 innerHeight in 进行比较ComponentDidUpdate。尽管由于出现多个结果，页面确实有滚动条，但我的hasOverflow变量总是返回false. 让它发挥作用的最理想方法是什么？

class ExampleClass extends Component {
  componentDidUpdate() {
    const element = this.element;

    const hasOverflow = element.scrollHeight > element.innerHeight;

    console.log(hasOverflow);
  }

  render() {
    <div ref={ el => { this.element = el } }>
      { this.renderElemnts() }
    </div>
  }
}

标签： javascriptreactjs

解决方案

innerHeight是 窗口 的 函数 所以element.innerHeight总是undefined, 所以element.scrollHeight > element.innerHeight总是false.

你在找什么element.offsetHeight：

https://stackblitz.com/edit/react-vb4quk

如果你想测试窗口是否有滚动，你可以检查

document.body.scrollHeight > window.innerHeight

https://stackblitz.com/edit/react-afjlmr?file=index.js

推荐阅读