我正在研究一个函数来检测DIV元素内的文本是否会溢出。在这方面,我在Chrome和IE中都有一个功能,它将元素的scrollHeight与clientHeight属性进行比较。
但是在FireFox中,两个属性(以及offsetHeight)总是报告相同的数字,恰好是div元素的高度。
如果我将'overflow:auto'添加到div样式,我会从scrollHeight属性中获得准确的结果。但是显示滚动条对于我正在进行的项目来说不是一个可接受的解决方案。
有什么建议吗?
答案 0 :(得分:14)
这是记录在案的行为:
当元素的内容没有时 然后生成一个垂直滚动条 它的scrollHeight属性等于 它的clientHeight属性。
https://developer.mozilla.org/en/DOM/element.scrollHeight
我知道它不干净,但你可以这样做吗?
e.style.overflow = "scroll";
var scrollHeight = e.scrollHeight;
e.style.overflow = "hidden";
用户无法看到,因为当当前没有运行javascript时,页面才会重新绘制。
答案 1 :(得分:3)
Kartikaya Gupta在a blog post on the scrollWidth/scrollHeight properties中解释了Firefox的行为。
检测元素是否会溢出的建议是使其可滚动并暂时将scrollLeft
/ scrollTop
设置为1。当至少scrollWidth
或scrollHeight
保持其值时,元素将溢出。
为了防止检查对用户可见,您可能希望在克隆元素中执行检查放置在视口的负顶部或左侧。
答案 2 :(得分:0)
在实际的Firefox版本中,这不再是问题,因为即使没有指向此处的overflow =“scroll”技巧,scrollHeight属性也能正常工作。但在某些旧版本中它仍然会发生......
非常感谢@thejh,你的提示对我非常有用!