使用滾動寬度作爲內聯元素

我有一個問題，獲得在一個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

使用滾動寬度作爲內聯元素

回答

相關問題