window.innerWidth 包括滚动条宽度

Posted 2023-03-06

【中文标题】window.innerWidth 包括滚动条宽度

【英文标题】：window.innerWidth includes the scroll-bar width [duplicate]

【发布时间】：2015-05-25 19:58:43

【问题描述】：

我正在尝试计算视口的宽度，但不包括滚动条的宽度。 SO上有人说window.innerWidth可以做到这一点，但它考虑到了滚动条。

我尝试使用document.body.clientWidth，但是当窗口水平滚动时，失败了。

即使document.body.clientWidth > window.innerWidth，我也需要获取窗口的宽度，但没有滚动条的宽度

有人知道吗？

【问题讨论】：

你试过这个解决方案了吗？ ***.com/questions/1248081/…

这正是我正在做的，但更美观

@Oriol，它不是重复的，因为这不是我需要的。在那个问题中，OP 对包含/排除滚动条的宽度/高度不感兴趣，但我是！

@Victor 也许是真的，但多个答案可以解决您的问题。

好吧，滚动条是内容的一部分，所以它被纳入视口是没有错的。您可以尝试设置滚动条的样式，以便准确了解其宽度。有一些插件可以帮助解决这个问题，比如 iScroll.js、NiceScroll 等，它们可以制作类似于 iPhone 的简洁滚动，它会悬停在内容上，当你不滚动或移动鼠标等时它会消失。

【参考方案1】：

使用 jquery $(window).width() 会返回你想要的。

如果您的文档有水平滚动，$(document).width() 将返回文档宽度而不是窗口。

编辑： 使用纯 javascript，您可以使用 documentElement 从主窗口中提取文档，此代码的工作方式相同：

document.documentElement.clientWidth

【讨论】：

这是如何在 jQuery 中实现的？我想使用 jQuery

您可以包含来自 Google 或 Microsoft 的 jquery，然后使用 var mywidth=$(document).width() 将在“mywidth”中设置您想要的内容。 jquery的实现方法如下：w3schools.com/jquery/jquery_get_started.asp

不使用 jQuery 可以做到吗？

是的。我通过添加纯 JavaScript 代码更新了我的答案。 @fraxture