如何在没有（减号）滚动条的情况下获得屏幕宽度？

Posted 2023-03-06

【中文标题】如何在没有（减号）滚动条的情况下获得屏幕宽度？

【英文标题】：How to get screen width without (minus) scrollbar?

【发布时间】：2012-01-10 11:33:51

【问题描述】：

我有一个元素，需要它的宽度而不需要（！）垂直滚动条。

Firebug 告诉我正文宽度是 1280 像素。

这些都可以在 Firefox 中正常工作：

console.log($('.element').outerWidth() );
console.log($('.element').outerWidth(true) );

$detour = $('.child-of-element').offsetParent();
console.log( $detour.innerWidth() );

它们都返回 1263px，这是我正在寻找的值。

但是所有其他浏览器都给我 1280px。

有没有跨浏览器的方法来获得全屏宽度而没有（！）垂直滚动条？

【问题讨论】：

你需要垂直滚动条吗？或者你可以使用溢出：隐藏然后计算宽度？

您的问题可以参考本站***.com/questions/8794338/…

你可以试试width: 100%;

您是否要让元素占据整个屏幕宽度，不包括滚动条？

使用 CSS：width: calc(100vw - (100vw - 100%)); 来自 ***.com/a/34884924/1066234

【参考方案1】：

.prop("clientWidth") 和 .prop("scrollWidth")

var actualInnerWidth = $("body").prop("clientWidth"); // El. width minus scrollbar width
var actualInnerWidth = $("body").prop("scrollWidth"); // El. width minus scrollbar width

在 JavaScript 中：

var actualInnerWidth = document.body.clientWidth;     // El. width minus scrollbar width
var actualInnerWidth = document.body.scrollWidth;     // El. width minus scrollbar width

_{PS：请注意，要可靠地使用scrollWidth，您的元素不应水平溢出}

jsBin demo

---

您也可以使用.innerWidth()，但这仅适用于body 元素

var innerWidth = $('body').innerWidth(); // Width PX minus scrollbar 

【讨论】：

如果由于某种原因您更改了 body 元素的宽度，这将不起作用。

这似乎不再适用于 Chrome，报告的宽度实际上比窗口本身大 20px，我已经尝试了很多宽度测量到目前为止没有。

@Sammaye 那是因为你忘记了（为什么？）设置 margin:0;到 BODY 或使用常见的 CSS 重置代码。 jsbin.com/homixuqi/2/edit 。 同样，代码运行良好。

@NamanGoel 作为网页设计师，你的工作是防止身体宽度出现混乱。这不是一项艰巨的任务。此外，关于高度，它取决于您的body 是否溢出。如果它溢出而不是约束它。

@RokoC.Buljan 我在这里并不反对你。当然，没有一个好的网页设计师/开发人员会弄乱正文宽度和其他东西。我的观点是关于使用最可靠的 API。一些 javascript 开发人员可能正在构建插件等，并且可能无法控制整个页面。

【参考方案2】：

您可以通过简单地编写来使用 vanilla javascript：

var width = el.clientWidth;

您也可以使用它来获取文档的宽度，如下所示：

var docWidth = document.documentElement.clientWidth || document.body.clientWidth;

来源：MDN

还可以获取整个窗口的宽度，包括滚动条，如下：

var fullWidth = window.innerWidth;

但并非所有浏览器都支持此功能，因此作为后备方案，您可能希望使用上述docWidth，并添加scrollbar width。

来源：MDN

【讨论】：

这里不考虑是否有滚动条

document.documentElement.clientWidth 对我帮助最大，因为它也适用于高度（如果正文没有填满页面等，innerHeight 可以更小）并且在没有滚动条的情况下获取值.

document.documentElement.clientWidth 是真正的赢家。 document.body.clientWidth 是可以的，除非您在 body 元素上设置了 min-width 并且浏览器当前小于该最小宽度。

【参考方案3】：

以下是一些假设$element 是jQuery 元素的示例：

// Element width including overflow (scrollbar)
$element[0].offsetWidth; // 1280 in your case

// Element width excluding overflow (scrollbar)
$element[0].clientWidth; // 1280 - scrollbarWidth

// Scrollbar width
$element[0].offsetWidth - $element[0].clientWidth; // 0 if no scrollbar

【参考方案4】：

试试这个：

$('body, html').css('overflow', 'hidden');
var screenWidth1 = $(window).width();
$('body, html').css('overflow', 'visible');
var screenWidth2 = $(window).width();
alert(screenWidth1); // Gives the screenwith without scrollbar
alert(screenWidth2); // Gives the screenwith including scrollbar

您可以使用此代码通过有无滚动条来获取屏幕宽度。 在这里，我改变了body的溢出值，得到了有无滚动条的宽度。

【讨论】：

我也不得不依赖这个。上面的答案对我不起作用

节省了我的时间！非常感谢！

【参考方案5】：

在没有滚动条的情况下获得正确宽度和高度的最安全的地方是 HTML 元素。试试这个：

var width = document.documentElement.clientWidth
var height = document.documentElement.clientHeight

浏览器支持相当不错，IE 9 及更高版本支持这一点。对于 OLD IE，请使用此处提到的众多备选方案之一。

【参考方案6】：

我遇到了类似的问题，width:100%; 为我解决了这个问题。在尝试了这个问题的答案并意识到<iframe> 的本质将使这些 javascript 测量工具在不使用一些复杂功能的情况下变得不准确后，我来到了这个解决方案。做 100% 是在 iframe 中处理它的简单方法。我不知道您的问题，因为我不确定您正在处理哪些 HTML 元素。

【参考方案7】：

这些解决方案都不适合我，但是我能够通过获取宽度并减去 width of the scroll bar 来解决它。我不确定它的跨浏览器兼容性如何。

【参考方案8】：

这是我用的

function windowSizes()
    var e = window,
        a = 'inner';
    if (!('innerWidth' in window)) 
        a = 'client';
        e = document.documentElement || document.body;
    
    return 
        width: e[a + 'Width'],
        height: e[a + 'Height']
    ;  


$(window).on('resize', function () 
    console.log( windowSizes().width,windowSizes().height );
);