javascript - reactjs中如何知道浏览器是否显示滚动条？

Question

我正在研究反应项目。当我们将屏幕尺寸从大减小到小时，浏览器中会出现一个滚动条，结果我的测试用例失败了。我想知道有什么方法可以找到浏览器中是否显示滚动条所有类型的屏幕尺寸。还有什么方法可以获取浏览器中显示的滚动条的大小？

标签： javascriptreactjsscrollbar

Answer 1

您可以将内容的高度与窗口的高度进行比较。那么if (document.body.offsetHeight > window.innerHeight)滚动条将是可见的。

UPD：关于滚动条的大小。它的宽度只是 和 的差值window.innerWidth，document.body.offsetWidth它的高度等于window.innerHeight。所以总结一下：

let scrollbarSize = {
  heigth: window.innerHeight,
  width: window.innerWidth - document.body.offsetWidth
}