Question

我想根据浏览器窗口是否具有垂直滚动条来有条件地渲染div。我的renderElements方法是从API中提取的，结果有所不同。我尝试为我的div分配一个引用，并将其scrollHeight与ComponentDidUpdate中的innerHeight进行比较。尽管由于出现多个结果而页面确实具有滚动条的情况，但我的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>
  }
}

Answer 1

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

使用React检测垂直页面溢出

1 个答案: