javascript - 为什么 scrollWidth 在这种情况下在 Firefox 中不起作用？

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");

祝你好运

安德烈