JS | JS之深入理解滚动大小scroll系列属性

最新推荐文章于 2025-04-27 13:42:17 发布

儒雅的烤地瓜

最新推荐文章于 2025-04-27 13:42:17 发布

阅读量1.8k

点赞数 28

分类专栏： JavaScript 文章标签： javascript 前端 html

本文链接：https://blog.youkuaiyun.com/sunyctf/article/details/143031317

版权

前面两篇博文分别介绍过偏移大小、客户区大小。本文介绍元素尺寸中内容最多的一部分——滚动scroll。

一、滚动大小

滚动宽高

参考：Javascript进阶篇——获取浏览器窗口可视区域大小 + 获取网页尺寸 - 博客园

scrollHeight

scrollHeight表示元素的总高度，包括由于溢出而无法展示在网页的不可见部分

scrollWidth

scrollWidth表示元素的总宽度，包括由于溢出而无法展示在网页的不可见部分

注意：IE7-浏览器返回值是不准确的

【1】没有滚动条时，scrollHeight与clientHeight属性结果相等，scrollWidth与clientWidth属性结果相等

<div id="test" style="width: 100px;height: 100px;padding: 10px;margin: 10px;border: 1px solid black;"></div>
<script>
//120 120
console.log(test.scrollHeight,test.scrollWidth);
//120 120
console.log(test.clientHeight,test.clientWidth);
</script>

【2】存在滚动条时，但元素设置宽高大于等于元素内容宽高时，scroll和client属性的结果相等

<div id="test" style="width: 100px;height: 100px;padding: 10px;margin: 10px;border: 1px solid black;overflow:scroll;font-size:20px;line-height:1;">
    内容<br>内容<br>
</div>
<script>
//103(120-17) 103(120-17)
console.log(test.scrollHeight,test.scrollWidth);
//103(120-17) 103(120-17)
console.log(test.clientHeight,test.clientWidth);
</script>

【3】存在滚动条，但元素设置宽高小于元素内容宽高，即存在内容溢出的情况时，scroll属性大于client属性

注意：scrollHeight属性存在兼容性问题，chrome和safari浏览器中，scrollHeight包含padding-bottom；而IE和firefox不包含padding-bottom

<div id="test" style="width: 100px;height: 100px;padding: 10px;margin: 10px;border: 1px solid black;overflow:scroll;font-size:20px;line-height:200px;">
    内容</div>
<script>
//chrome/safari:220(200+10+10)
//firefox/IE:210(200+10)
console.log(test.scrollHeight);
//103(120-17)
console.log(test.clientHeight);
</script>

页面尺寸

document.documentElement.clientHeight表示页面的可视区域的尺寸，而document.documentElement.scrollHeight表示html元素内容的实际尺寸。但是由于各个浏览器表现不一样，分为以下几种情况

【1】html元素没有滚动条时，IE和firefox的client和scroll属性始终相同，且返回可视区的尺寸大小；而safari和chrome表现正常，clientHeight返回可视区域大小，而scrollHeight返回元素内容大小

//firefox:  755 755
//chrome:   947 8(body元素的margin)
//safari:   744 8(body元素的margin)
//IE:       768 768
console.log(document.documentElement.clientHeight,document.documentElement.scrollHeight)

【2】html元素存在滚动条时，各个浏览器都表现正常。clientHeight返回可视区域大小，而scrollHeight返回元素内容大小

<body style="height:1000px">
<script>
//firefox:  755 1016(1000+8*2)
//chrome:   947 1016(1000+8*2)
//safari:   744 1016(1000+8*2)
//IE:       768 1016(1000+8*2)
console.log(document.documentElement.clientHeight,document.documentElement.scrollHeight)
</script>

兼容

因此，要取得文档实际高度时，要取得<html>元素的scrollHeight和clientHeight的最大值