changecoder-utils
v0.0.3
Published
判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop、clientHeight、scrollHeight。 1. scrollTop: 滚动条在Y轴上的滚动距离 2. clientHeight: 内容可视区域的高度(元素内容及其边框所占据的空间大小) 3. scrollHeight: 内容可视区域的高度加上溢出(滚动)的距离(元素内容的总高度) 从这三个属性的介绍就可以看出来,滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight。
Downloads
3
Readme
Utils
判断滚动条是否到底部
判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop、clientHeight、scrollHeight。
- scrollTop: 滚动条在Y轴上的滚动距离
- clientHeight: 内容可视区域的高度(元素内容及其边框所占据的空间大小)
- scrollHeight: 内容可视区域的高度加上溢出(滚动)的距离(元素内容的总高度) 从这三个属性的介绍就可以看出来,滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight。
- offsetHeight:获取元素可见高度
document.compatMode
IE对盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的,在Standards Mode下对于盒模型的解释和其他的标准浏览器是一样,但在Quirks Mode模式下则有很大差别,而在不声明Doctype的情况下,IE默认又是Quirks Mode。所以为兼容性考虑,我们可能需要获取当前的文档渲染方式。
- BackCompat: 标准兼容模式关闭(混杂模式),浏览器客户区宽度是document.body.clientWidth
- CSS1Compat: 标准兼容模式开启,浏览器客户区宽度是document.documentElement.clientWidth 浏览器客户区高度、滚动条高度、滚动条的Left、滚动条的Top等等都是上面的情况。