使用滚动宽度作为内联元素

我有一个问题，获得在一个div中的内容的确切宽度，该（内容）有时更小，但有时也比视口大（溢出隐藏）。这个问题不是关于JS方法的填充/边界/边界问题。使用滚动宽度作为内联元素

clientWidth和offsetWidth将只返回内容的可视宽度，在我的情况下，视口的宽度，因为DIV是块级元素

scrollWidth会给我的宽度内容，如果div扩展视口，但如果div更小，它会给我视口宽度。原因是它总是返回更大的内容宽度和元素宽度。

我在找总是返回内容宽度的方法！另外我不能只将div设置为内联，并使用scrollWidth（），因为它总是返回0（不适用于内联）。

所以基本上scrollWidth适用于我，只要内容大于视口。你有什么建议吗？如果情况仍不清楚，我会打印一张图片。

编辑

基本上我只是问我如何使用ScrollWidth为内联元素，但适当didn't理解它。

来源

2016-08-16 davedadizzel

如果您的css规则强制元素扩展其宽度，则scrollWidth将返回完整宽度。我认为解决方案是确保你的元素不被CSS拉长。

以此为例。第一个div有display: inline-block，不会扩大其大小。第二个div具有默认的display: block，并将跨越其相对定位的父级的宽度。

点击“Expand Snippet/Full page”并调整窗口大小以查看结果。

var to = null; 
 
var log = function() { 
 
    console.log("Width 1: ", document.querySelector(".div1").scrollWidth); 
 
    
 
    console.log("Width 2: ", document.querySelector(".div2").scrollWidth); 
 
} 
 

 
window.addEventListener("resize", function() { 
 
    clearTimeout(to); 
 
    
 
    to = setTimeout(log, 500); 
 
});

div { 
 
    border: 1px solid red; 
 
    max-width: 100%; 
 
    max-height: 40px; 
 
    overflow-x: scroll; 
 
    overflow-y: hidden; 
 
    white-space: nowrap; 
 
} 
 

 
.div1 { 
 
    display: inline-block; 
 
    
 
} 
 

 
.div2 { 
 
    
 
}

<div class="div1"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis diam nec arcu consequat rhoncus. 
 
</div> 
 

 
<div class="div2"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis diam nec arcu consequat rhoncus. 
 
</div>

来源

2016-08-16 12:48:22 user3297291

谢谢，使用内联块对我来说非常完美，基本上就是我一直在寻找的东西！ – davedadizzel

如果我得到您的问题的权利，下面的函数将看scrollWidth，如果它大于clientWidth，这意味着它是溢出，否则它是完全可见或更小。你能给我一个镜头，让我知道吗？我希望它有帮助。

function getAbsoluteWidth(elementIdentifier) { 
var $elem=document.getElementById(elementIdentifier); 

if($elem.scrollWidth>$elem.clientWidth){ 
    return $elem.scrollWidth; 
} 

return $elem.clientWidth; 
}

来源

2016-08-16 12:44:08

谢谢您的建议！我现在意识到clientWidth将始终返回包装div的宽度，因此也会返回视口宽度，因为它是块级元素。我会尝试通过使用内联块来解决这个问题，但是现在我不再需要你的功能了。非常感谢您的努力！ – davedadizzel

您可以使用下面的jQuery方法

.height（）箱的高度（无空白，边框填充）

.WIDTH（）宽度框（无边距，填充）

.innerHeight（）框的高度加填充

.innerWidth（）盒加填充

.outerHeight（）高度框加上填充和边框

.outerWidth（）盒加填充和边界
的宽度的宽度

.outerHeight（）盒加填充，边框和边距的（真正的）高度

。outerWidth（）（true）框的宽度加上填充，边框和边距

来源

2016-08-16 12:45:06

使用滚动宽度作为内联元素

回答

相关问题