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

Question

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

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

}

Answer 2

我本来希望发表评论，但我还没有访问权限。

我假设您在这里谈论的是高度，如果不是，请在适当的情况下应用相同的解决方案。

了解您的浏览器是否显示垂直滚动条。比较文档的高度和屏幕高度。

在这种情况下，计算文档高度的方法通常会因浏览器而异。使用这样的东西：

let scrollHeight = Math.max(

  document.body.scrollHeight, document.documentElement.scrollHeight,

  document.body.offsetHeight, document.documentElement.offsetHeight,

  document.body.clientHeight, document.documentElement.clientHeight

);

要计算您的窗口高度，请使用：

const windowHeight = documentElement.clientHeight

如果您的 scrollHeight 大于 windowHeight，那么您可以最确定存在垂直滚动条。因此很容易被发现

Answer 3

在这个沙箱中，我测试了两种可能的解决方案。第一种方法（ScrollableComponent 和钩子 useIsScrollable）基于尝试随元素滚动。如果它做了什么，那么你就知道它有滚动条。第二种方法基于测量（ScrollableComponentA 和钩子 useIsScrollableA）。测量包装元素和内部元素并比较其高度和宽度。