offset系列api
页可见区域宽: document.body.clientWidth;
网页可见区域高: document.body.clientHeight;
网页可见区域宽: document.body.offsetWidth (包括边线的宽);
网页可见区域高: document.body.offsetHeight (包括边线的宽);
网页正文全文宽: document.body.scrollWidth;
网页正文全文高: document.body.scrollHeight;
网页被卷去的高: document.body.scrollTop;
网页被卷去的左: document.body.scrollLeft;
网页正文部分上: window.screenTop;
网页正文部分左: window.screenLeft;
屏幕分辨率的高: window.screen.height;
屏幕分辨率的宽: window.screen.width;
屏幕可用工作区高度: window.screen.availHeight;
HTMLElement.offsetTop 为只读属性,它返回当前元素相对于其 offsetParent 元素的顶部的距离。
window.innerHeight:浏览器窗口的视口(viewport)高度(以像素为单位);如果有水平滚动条,也包括滚动条高度。
获取div的宽高
divObj.offsetWidth;
divObj.offsetHeight;
divObj.offsetLeft;
divObj.offsetTop;
注意:不脱离文档流的时候 自己元素的divObj.offsetLeft;值是父margin+父padding+父border+自己margin
脱离文档流的时候 divObj.offsetLeft;值是父margin+自己margin
获取客户端的大小
var box = document.getElementById('box');
console.log(box.clientLeft); // 得到的是左边框宽度
console.log(box.clientTop); //得到的是上边框的宽度
console.log(box.clientWidth); //可视区域的宽度 边框内部
console.log(box.clientHeight); //可视区域的高度 边框内部
console.log(e.clientX); //鼠标坐标的位置
console.log(e.clientY); //鼠标坐标的位置
滚动偏移
var box = document.getElementById('box');
console.log(box.scrollLeft)
console.log(box.scrollTop)
console.log(box.scrollWidth)
console.log(box.scrollHeight)
注意:
scrollHeiht:是内容的高度,如果内容少于标签高度,则是标签的高度
scrollWidth:是内容的宽度,如果内容的宽度少于标签宽度,则是标签的宽度
scrollLeft:内容向左拉进的距离
scrollTop:内容向上拉进的距离
滚动事件:
obj.onscroll = function () {
};
懒加载的原理
https://blog.csdn.net/w1418899532/article/details/90515969