scrollHeight的分析

weixin_33766168發表於2017-11-11
<!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，如需轉載請自行聯絡原作者



相關文章