如何获得没有（减）滚动条的屏幕宽度？ [英] How to get screen width without (minus) scrollbar?

问题描述

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

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

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

Firebug tells me body width is 1280px.

这两种工作在Firefox中都很好：

Either of these work fine in Firefox:

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

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

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

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

但是所有其他浏览器给我 1280像素。

However all other browser give me 1280px.

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

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

推荐答案

.prop（clientWidth）和 .prop（scrollWidth）

.prop("clientWidth") and .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： code> scrollWidth 可靠您的元素不应该水平溢出}

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

jsBin演示

jsBin demo

你也可以使用 .innerWidth（），但这只适用于正文元素

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

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

这篇关于如何获得没有（减）滚动条的屏幕宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！