為什么在Firefox中，scrollWidth在這種情況下不起作用？

Question

我正在嘗試使用Javascript制作一個簡單的字幕，並且需要在以下內容中獲取innerDIV的完整內容寬度 ：

<div id="container" style="width: 100%; overflow: hidden;">
    <div id="innerDiv" style="direction: rtl; white-space: nowrap; overflow: visible; position: relative;">
        very long ... text
    </div>
</div>

我嘗試了scrollWidth 。 它在Chrome中效果很好， 但在Firefox中效果不佳（而是提供clientWidth的值）。

這是一個現場演示： http : //jsfiddle.net/5fPGy/3/ （在Chrome和Firefox中嘗試）

有人知道為什么嗎？ 以及如何獲得整個寬度？

提前致謝。

Answer 1

我遇到了同樣的問題，並且為您的問題找到了答案。 這是Firefox中的錯誤： https : //bugzilla.mozilla.org/show_bug.cgi?id=833542 。

Firefox為scrollWidth返回clientWidth值。 應該在Firefox 21中修復。

現在，我使用一種解決方法在Firefox上獲取正確的scrollWidth：將溢出設置為隱藏，獲取正確的scrollWidth並將溢出恢復為可見。 請參閱： http : //jsfiddle.net/5fPGy/5/

var scrollWidth = $(ele).css("overflow", "hidden")[0].scrollWidth;
alert('clientWidt h = ' + ele.clientWidth + ',  scrollWidth = ' + scrollWidth  );
$(ele).css("overflow", "visible");

祝你好運

安德烈

Answer 2

這似乎可以解決問題：

docWidth = Math.max(
        Math.max(frameDoc.body.scrollWidth, frameDoc.documentElement.scrollWidth),
        Math.max(frameDoc.body.offsetWidth, frameDoc.documentElement.offsetWidth)                               
);