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

How to get screen width without (minus) scrollbar?

提问by frequent

I have an element and need it's width without(!) vertical scrollbar.

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

Firebug tells me body width is 1280px.

Firebug 告诉我主体宽度是 1280 像素。

Either of these work fine in Firefox:

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

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

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

They all return 1263px, which is the value I'm looking for.

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

However all other browser give me 1280px.

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

Is there a cross browser way to get a fullscreen width without(!) vertical scrollbar?

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

回答by Roko C. Buljan

.prop("clientWidth")and .prop("scrollWidth")

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

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

in JavaScript:

在JavaScript 中：

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

_{P.S:Note that to use scrollWidthreliably your element should not overflow horizontally}

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

jsBin demo

jsBin 演示

---

---

You could also use .innerWidth()but this will work only on the bodyelement

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

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

回答by Joshua Bambrick

You can use vanilla javascript by simply writing:

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

var width = el.clientWidth;

You could also use this to get the width of the document as follows:

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

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

Source: MDN

来源：MDN

You can also get the width of the full window, including the scrollbar, as follows:

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

var fullWidth = window.innerWidth;

However this is not supported by all browsers, so as a fallback, you may want to use docWidthas above, and add on the scrollbar width.

但是，并非所有浏览器都支持此功能，因此作为后备，您可能希望使用docWidth上述方法，并添加滚动条宽度。

Source: MDN

来源：MDN

回答by Konstantin Dinev

Here are some examples which assume $elementis a jQueryelement:

以下是一些假设$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

回答by mrbengi

Try this :

尝试这个 ：

$('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

You can get the screen width by with and without scroll bar by using this code. Here, I have changed the overflow value of bodyand get the width with and without scrollbar.

您可以使用此代码通过使用和不使用滚动条来获取屏幕宽度。在这里，我更改了 的溢出值body并获取了带滚动条和不带滚动条的宽度。

回答by Naman Goel

The safest place to get the correct width and height without the scrollbars is from the HTML element. Try this:

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

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

Browser support is pretty decent, with IE 9 and up supporting this. For OLD IE, use one of the many fallbacks mentioned here.

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

回答by www139

I experienced a similar problem and doing width:100%;solved it for me. I came to this solution after trying an answer in this question and realizing that the very nature of an <iframe>will make these javascript measurement tools inaccurate without using some complex function. Doing 100% is a simple way to take care of it in an iframe. I don't know about your issue since I'm not sure of what HTML elements you are manipulating.

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

回答by homebrand

None of these solutions worked for me, however I was able to fix it by taking the width and subtracting the width of the scroll bar. I'm not sure how cross-browser compatible this is.

这些解决方案都不适合我，但是我能够通过获取宽度并减去滚动条的宽度来修复它。我不确定这是如何跨浏览器兼容的。

回答by Benn

Here is what I use

这是我使用的

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 );
});