offset系列和懒加载

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