scroll**、client**、offset**

scroll**、client**、offset**

• clientHeight --> padding + content

• offsetHeight --> border + padding + content

• scrollHeight --> padding + content + scrollTop(即展示区的总高度，包含滚动条的内容)

• clientTop --> border

• offsetTop --> 距离父元素的偏移量

• scrollTop --> 滚动卷去的高度

window尺寸相关属性

• window.innerHeight --> 浏览器的高度(document起始，不含地址栏等)
• window.outerHeight --> 整个浏览器的高度(从标签栏顶部开始)
• window.screen.height --> 用户屏幕的高度
• window.screen.screenTop --> 浏览器窗口到用户屏幕最上方的距离

懒加载

 <div style="height: 500px; overflow-y: auto" id="wrap">
   <div
     style="
       height: 2000px;
       width: 100%;
       background-color: azure;
       overflow: hidden;
     "
   >
     <div
       id="imgdiv"
       style="
         width: 60px;
         height: 120px;
         background-color: skyblue;
         margin-top: 1200px;
       "
     ></div>
   </div>
 </div>

wrap.addEventListener("scroll", function () {
     console.log(wrap.scrollHeight);
  // console.log(wrap.clientHeight);
  // console.log(wrap.scrollTop, "wrap.scrollTop");
  // console.log(imgdiv.offsetTop, "imgdiv.offsetTop");
  if (imgdiv.offsetTop - wrap.scrollTop <= wrap.clientHeight) {
    console.log("加载");
  }
});