- document文档
- document 文档
- Element 对象
- client 客户端
- offset 偏移
- scroll 溢出
offset scroll client 三者之间的区别
1. offset 获取一个元素在整个文档中的位置信息
dom.offsetHeight
dom.offsetWidth
//获取的是元素的实际宽高 = width + border + padding
dom.offsetTop
dom.offsetLeft
//获取元素的位置信息 如果父元素有定位属性的话得到是距离它父元素的位置 如父级没有定位属性则是得到距离body的距离
2. scroll 元素滚动条的位置
dom.scrollHeight
dom.scrollWidth
//获取元素自身的宽度去除边框某种意义上和clientHeight一样
scrollTop
//一个方法主要是得到文档超出窗口的部分 dom对像没有效果
获取滚动条距离顶部的位置
语法格式:
var scrollHeight = document.documenElement.scrollTop
设置滚动条的位置
1. window.scrollTo(x轴, Y轴)
2. 设置滚动条的滑动的方式
window.scrollTo({
top: , //设置滚动条的位置
behavior:"smooth", //滚动条的的滑动形式
})
//需要配和onscroll事件一起使用
3. client 获取一个元素的大小
dom.clientHeight
dom.clientWidth
//获取元素自身的宽度去除边框某种意义上和scrollHeight一样
dom.clientTop
dom.clientLeft
获取元素边框的宽高
获取窗口大小的API
语法格式:
变量 = document.documentElement.clientHeight
变量 = document.documentElement.clientWifht
变量 = innerWidth
变量 = innerHeigth
两种方法都是可以获取窗口的宽高
获取一个对象位置信息的语法格式:
var number= DOM.getBoundingClientRect().方法
/* .top:元素上边到视窗上边的距离;
.right:元素右边到视窗左边的距离;
.bottom:元素下边到视窗上边的距离;
.left:元素左边到视窗左边的距离;
.width:是元素自身的宽
.height是元素自身的高
*/
获取一个元素距离窗口的距离信息
公式
触底加载的计算公式:
滚动条划出的部分+窗口的高度=整个文档的高度
楼层导航的计算公式:
滚动条划出的部分+窗口的高度=元素距离顶部的距离