                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JS/jQuery宽高的理解和应用

scrollWidth和scrollHeight到底怎么算啊??

无滚动轴时简单(不过在chrome中的document.body和ie,firefox下还是有区别的)

有滚动轴时就复杂了

scrollWidth和scrollHeight在不同浏览器下表现不同(实测)(内部元素就用了一个)

(chrome和firefox和ie8,9,10下scrollWidth)

scrollWidth ===padding-left + 内部元素的(margin-left+padding*2+border*2+width)

(firefox和ie9,10下)

scrollHeight ===padding-top + 内部元素(margin*2+padding*2+border*2+width)

chrome下

scrollHeight ===padding*2 + 内部元素(margin*2+padding*2+border*2+width)

还有ie7,8下数值又不同了(不想弄了), 浏览器设计怎么都没个标准 , 这到底怎么算啊???

mwm喵

2016-11-04

源自：JS/jQuery宽高的理解和应用 2-6

关注问题我要回答

5002

操作

收起

1 回答

山神庙
2016-11-05

我是这么理解的，一起讨论下。

分body和div两种：

div：

1.无滚动轴

scrollWidth = clientWidth = width + padding*2

2.有滚动轴(不包括滚动轴)

scrollWidth = 实际内容宽度(包含可滚动部分，容器本身做了宽高限制) + padding*2

scrollHeight = 实际内容高度(包含可滚动部分，容器本身做了宽高限制) + padding*2

body

1.无滚动轴：

1.宽高小于浏览器窗口：浏览器窗口的宽高

2.宽高大小浏览器窗口：内容的实际高度+padding+margin

2.有滚动轴：内容的实际高度+padding+margin

1 回复有任何疑惑可以回复我~

收起回答

mwm喵提问者

div内部有滚动轴时在每个浏览器中的处理策略不同, 就我测试的ie,firefox,chrome中就scrollWidth来看会自动去除padding-right还有内部元素的margin-right(ie7下又不同了) 就scrollHeight来看chrome不做任何去除,firefox和ie中就会自动去除padding-bottom了总之,div内部出现滚动轴的计算应该很少出现, 所以不用过多讨论;.

2016-11-05 回复有任何疑惑可以回复我~

仰望星空的天

按照视频里面讲的div出现有滚动轴的宽度感觉包含了滚动轴还有其它的东西

2016-11-10 回复有任何疑惑可以回复我~

仰望星空的天

还发现一个问题，火狐在body 1.无滚动轴： 1.宽高小于浏览器窗口：浏览器窗口的宽高。显示的也是给定的宽高啊 <style> #showDiv{ width: 500px; height: 300px; background-color: red; margin-top: 300px; } </style> <div id="showDiv"></div> <script type="text/javascript"> alert(document.body.scrollHeight) </script>

2016-11-11 回复有任何疑惑可以回复我~

0/150

提交

取消

JS/jQuery宽高的理解和应用

参与学习 34059 人
解答问题 58 个

js/jquery各种宽高的理解，结合实例对宽高做一些简单的应用

进入课程

scrollWidth和scrollHeight到底怎么算啊??

我要回答关注问题

热搜

最近搜索清空

scrollWidth和scrollHeight到底怎么算啊??

1 回答

scrollWidth和scrollHeight到底怎么算啊??