对内联元素使用 ScrollWidth

Question

我在获取 div 中内容的确切宽度时遇到问题，它（内容）有时比视口小，但有时也比视口大（溢出被隐藏）。这个问题不是关于 JS 方法的 padding/margin/border 问题。

clientWidth 和 offsetWidth 只会 return 内容的可见宽度，在我的例子中是视口宽度，因为div 是块级元素

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

我正在寻找一种始终 return 内容宽度的方法！此外，我不能只将 div 设置为内联并使用 scrollWidth() 因为它总是 return 0（不适用于内联）。

所以基本上只要内容大于视口，scrollWidth 就适合我。你有什么建议吗？如果情况还不明朗我再上个图。

编辑

基本上我只是在问如何将 ScrollWidth 用于内联元素，但没有正确理解它。

Answer 1

如果我答对了你的问题，下面的函数将查看 scrollWidth，如果它大于 clientWidth，这意味着它溢出，否则它是完全可见的或更小。你能试一试并告诉我吗？希望对你有帮助。

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

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

return $elem.clientWidth;
}

Answer 2

您可以使用以下jquery方法

.height()框的高度（无边距、边框、内边距）

.width() 框的宽度（无边距、边框、内边距）

.innerHeight() 框加内边距的高度

.innerWidth() 框加内边距的宽度

.outerHeight() 框的高度加上填充和边框

.outerWidth() 框的宽度加上填充和边框

.outerHeight() (true) 框的高度加上填充、边框和边距

.outerWidth() (true) 框的宽度加上填充、边框和边距

Answer 3

如果您的 css 规则强制元素扩展其宽度，scrollWidth 将 return 全宽。我认为解决方案是确保您的元素不会被 css.

拉伸

举个例子。第一个 div 有 display: inline-block 并且不会扩展它的大小。第二个 div 具有默认值 display: block 并将跨越其相对定位的父级的宽度。

单击 "Expand Snippet/Full page" 并调整 window 大小以查看结果。

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>

对内联元素使用 ScrollWidth

Use ScrollWidth for inline Elements

html

javascript

css

width