如何获得没有（减号）滚动条的屏幕宽度？
我有一个元素，需要它的宽度没有（！）垂直滚动条。
Firebug告诉我身体宽度是1280px。
这些在Firefox中都可以正常工作：
console.log($('.element').outerWidth() ); console.log($('.element').outerWidth(true) ); $detour = $('.child-of-element').offsetParent(); console.log( $detour.innerWidth() ); 他们都返回1263px ，这是我正在寻找的价值。
但所有其他浏览器给我1280px 。
是否有跨浏览器的方式来获得全屏宽度没有（！）垂直滚动条？
.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演示
你也可以使用.innerWidth()但是这只对body元素有效
var innerWidth = $('body').innerWidth(); // Width PX minus scrollbar
你可以通过简单的写作来使用vanilla javascript：
var width = el.clientWidth;
你也可以用这个来获取文档的宽度，如下所示：
var docWidth = document.documentElement.clientWidth || document.body.clientWidth;
来源： MDN
您还可以获得整个窗口的宽度，包括滚动条，如下所示：
var fullWidth = window.innerWidth;
然而，这不是所有的浏览器都支持的，所以作为回退，你可能想要像上面那样使用docWidth ，并在滚动条宽度上添加。
来源： MDN
下面是一些假设$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
尝试这个 ：
$('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的溢出值，并获得有和没有滚动条的宽度。
无需滚动条即可获得正确的宽度和高度的最安全的地方是来自HTML元素。 尝试这个：
var width = document.documentElement.clientWidth var height = document.documentElement.clientHeight
浏览器的支持是相当不错的，与IE 9和支持这一点。 对于旧版IE，请使用这里提到的许多回退之一。
我遇到类似的问题，并做width:100%; 为我解决了它。 在回答这个问题之后，我意识到一个<iframe>本质会使这些javascript测量工具不准确，而不使用一些复杂的函数。 做100％是一个简单的方法来照顾它在iframe中。 我不知道你的问题，因为我不知道你正在操纵什么HTML元素。
这些解决scheme都没有为我工作，但是我能够解决它的宽度和减去滚动条的宽度 。 我不知道这是如何跨浏览器兼容。
这是我使用的
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 ); });
