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

Question

我有一个元素,需要它的宽度没有(!)垂直滚动条.

Firebug告诉我身体宽度是1280px.

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

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

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

他们都返回1263px,这是我正在寻找的价值.

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

是否有跨浏览器的方式来获得没有(!)垂直滚动条的全屏宽度？

Answer 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演示

你也可以使用,.innerWidth()但这只适用于body元素

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

Answer 2

您只需编写以下内容即可使用vanilla javascript:

var width = el.clientWidth;

您还可以使用它来获取文档的宽度,如下所示:

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

资料来源:MDN

您还可以获得整个窗口的宽度,包括滚动条,如下所示:

var fullWidth = window.innerWidth;

但是,并非所有浏览器都支持此功能,因此作为后备,您可能需要使用docWidth上述内容,并添加滚动条宽度.

资料来源:MDN

Answer 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

Answer 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并在有和没有滚动条的情况下获得宽度.

Answer 5

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

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

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