首页 > 为什么在chrome和firefox下scrollHeight的取值不同?

为什么在chrome和firefox下scrollHeight的取值不同?

我在使用reactJS开发一个图片画廊的应用,最中心的图片的绝对定位高度等于halfStageH - halfImgH,其中halfImgH是图片高度/2。

该图片在firefox和IE11下都居中(如上图),在chrome下居然跑到了最下面(如下图1)。检查后发现,这张图片在FF下的scrollHeight等于它显示的实际高度447,而在chrome下scrollHeight只有136(如下图2)。


请问为什么在chrome下,scrollHeight不等于它的实际高度呢?136px是从何而来,我毫无头绪,望大神解答。


对于标准盒模型来说,
div显示的高度的是它的content高度(height),
offsetHeight = height + paddingTop + paddingBottom + borderTop + borderBottom.
scrollHeight = height + paddingTop + paddingBottom - scrollbarHeight. (有滚动条)
scrollHeight = height + paddingTop + paddingBottom.(无滚动条)

所以对于标准盒模型, height 和 scrollHeight, offsetHeight 值要想相等,就不能设置padding,border也不能有scrollbar出现。


我找到了出现这种情况的原因,是React Component在Chrome下的渲染速度太慢了,当componentDidMount执行时,使用findDOMNode获取到的组件对象属性还没有完全渲染出来,所以获取到的height值不等于其真实值。

在外面包覆一层window.onload可以解决这个问题。

【热门文章】
【热门文章】