jQuery获取大于视口的元素的宽度

Question

我有一个水平滚动的网站，它有一个与id = "bookWrap"的div，填充了inline-block元素，所以宽度对我来说是未知的，但它远远延伸了我的viewPort。

虽然试图通过$('#bookWrap').width()获取此元素的宽度jQuery返回我的视口宽度是1680，而不是元素的实际宽度。

如何获取延伸到视口之外的元素的真实宽度？

Answer 1

也许你应该计算宽度：

var width = 0; 
$('#bookWrap div').each(function(){ 
    width += $(this).width(); 
}); 
alert(width); 

这里看看：http://jsfiddle.net/szKkT/4/

Answer 2

outerWidth（）会给你别的东西吗？

http://api.jquery.com/outerWidth/

Answer 3

考虑这个更大的变通，因为它似乎jQuery的width()和outerWidth()是，由于某种原因，无论是在视口宽度切断。

alert(getTotalWidth("#bookWrap DIV")); 

function getTotalWidth(selector) { 
    var totalWidth = 0; 
    $(selector).each(function() { 
     totalWidth += $(this).outerWidth(); 
    }); 
    return totalWidth; 
} 

Fiddle here

Answer 4

您可以使用此代码段来检查哪些元素是比你的视口大：

$('*').each(function() { 
 
    var viewportWidth = 768; 
 
    if($(this).outerWidth() > viewportWidth){ 
 
    //prints element in console so you can check what's the element 
 
    console.log($(this)[0]); 
 
    } 
 
});

Answer 5

您可以使用元素scrollWidth属性：

var realWidth = document.getElementById('#bookWrap').scrollWidth;