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

我在做react项目。当我们将屏幕大小从大变小时，浏览器中会出现一个滚动条，因此我的测试用例失败。我想知道是否有任何方法可以找到是否在浏览器中显示所有类型屏幕大小的滚动条。还有什么方法可以获得浏览器中显示的滚动条的大小？

您可以将内容的高度与窗口的高度进行比较。 因此

如果（document.body.offsetHeight>window.innerHeight）

则滚动条将可见

UPD： 关于滚动条的大小。它的宽度只是

window.innerWidth

和

document.body.offsetWidth

之间的差异，它的高度等于

window.innerHeight

。 综上所述：

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

---

我本希望得到一个评论，但我目前还无法获得

我假设你在这里谈论的是身高，如果不是，请在适当的地方应用相同的解决方案

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

在这种情况下，计算文档高度的方法通常因浏览器而异。使用类似以下内容：

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，则可以确定垂直滚动条存在。

---

因此，在本文中很容易检测到

，我已经测试了两种可能的解决方案。第一种方法（ScrollableComponent和hook useIsScrollable）基于尝试使用元素滚动。如果它做了什么，那么你知道它有滚动条。第二种方法基于测量（可滚动部件A和挂钩使用Crollablea）。测量包装元件和内部元件，并比较其高度和宽度

但是我们可以在react componet中使用它吗。另外，如果可以的话，如何获得显示的滚动条的长度。我看到不同浏览器的长度是不同的。@Gauranga，这是VanillaJS，所以您当然可以在React的组件中使用它。滚动条的“长度”是什么意思：它的高度，或宽度，或两者都有？对不起，我需要高度和宽度。@Gauranga，请告诉我它是否对您有帮助。