scrollHeight的分析

最新推荐文章于 2025-05-29 15:40:25 发布

weixin_33766168

最新推荐文章于 2025-05-29 15:40:25 发布

阅读量612

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml

原文链接：https://yq.aliyun.com/articles/425511

本文详细介绍了scrollHeight属性的使用方法及跨平台表现差异。通过设置不同的元素宽高比，展示了在有文字溢出的情况下，不同浏览器如何计算scrollHeight的值，并解释了滚动条对计算的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>scrollHeight</title>
<style type="text/css">
body{margin:0;}
div{font-size:12px;line-height:12px;height:3em;width:5em;}
</style>
</head>

<body>
<div onclick="alert(this.scrollHeight);" style="border:0px solid red;">
这里是一大段的文本，我们为了看看scrollHeight怎么用
</div>
</body>
</html>

既然是scroll我们考虑在有文字溢出的情况下使用它，我们会在后面看到这是为了保证跨平台：

1.我们现在宽高设的是3行5列，有个长单词跑出来了先不管。
除了火狐，我们得到的都是72px=文字内容高度就是12px*6因为文字共6行，大于制定的3行，会出滚动条，下面我们指定显示滚动条

overflow-y:scroll;出现y轴的垂直滚筒条，由于滚动条有宽度，把我们的文字挤下了，所以实际列数达不到5个字了，所以出现结果是8行，这样ie和safari的是12px*8=96px;
我们可以加上滚动条的宽度
width设为5em+17px=60px+17px=77px;这样宽度设为77px后，文字还是显示没设置时的6行数，于是scrollHeight还是72px了。

但是要注意的是firefox3.0.6里面如果height指定的值小于16*2=32px时，滚动条不显示，就是那2个箭头，这样实际文字列数可能要比其他浏览器多，于是得到的scrollHeight会小于其他的，因为其他的浏览器，那2个箭头可以缩放。fr

本文转自 xcf007 51CTO博客，原文链接：http://blog.51cto.com/xcf007/132172，如需转载请自行联系原作者