offsetWidth与clientWidth的区别

目录

1.offset（元素偏移量）

2.client（元素可视区）

3.scroll （元素滚动）

1.offset（元素偏移量）

•  offsetTop与offsetLeft是元素本身相对于父元素的偏移量，如果没有父元素，则以body为父元素进行偏移
• offsetWidth与offsetHeight是元素自身的宽高，包括border和padding，是只读属性，不能修改
• style属性也能获取元素的宽高，但是style只能获取行内样式，而offsetWidth与offsetHeight没有限制，style获取到的是带单位的字符串，而它俩是数字类型，还有就是style获取到的是不包含border和padding的宽高。如果只是获取元素宽高，就用offsetWidth与offsetHeight，因为它俩是只读的，要修改就用style。

2.client（元素可视区）

•  clientTop与clientLeft是元素的上边框和左边框大小
• clientWidth和clientHeight是元素可见区域的padding和content，不包括border，滚动条，overflow折叠起来的部分

3.scroll （元素滚动）

• scrollWidth和scrollHeight：不包括border和滚动条的宽高，包括content，padding，和overflow隐藏的的区域
• scrollWidth：content的宽 + padding的宽（把滚动条的宽度要从容器宽减去，隐藏部分的宽度也算在里面）
• scrollHeight：content的宽 + padding的宽（把滚动条的高度度要从容器高减去，隐藏部分的高度也算在里面）
• scrollTop：滚动条滚动后，可见区域最顶端到容器最顶端的距离（包括padding，不包括border）
• scrollLeft：滚动条滚动后，可见区域最左端到容器最左端的距离

4.判断滚动条滚动到底了的bug

在了解了前面的知识后，可以发现当scrollTop + clientHeight == scrollHeight时，恰好是滚动条滚动到底部了。但是实际情况下，只有1920x1080分辨率的情况下才可以，当改变浏览器的缩放比例时（或者电脑屏幕本身就不是1920x1080分辨率），scrollTop会是小数（且比标准下小一点），所以就会造成它们不相等，从而判断不出滚动条是否到底了。

解决办法：

scrollTop + clientHeight + 1 >= scrollHeight