JavaScript 基础:scrollTop,offsetTop,scrollLeft,offsetLeft,clientWidth,clientHeight,offsetW...
栏目: JavaScript · 发布时间: 5年前
内容简介:今天,我们要讲的是scrollTop,offsetTop,scrollLeft,offsetLeft,clientWidth,clientHeight,offsetWidth,offsetHeight,scrollWidth,scrollHeight的含义。思路:
今天,我们要讲的是scrollTop,offsetTop,scrollLeft,offsetLeft,clientWidth,clientHeight,offsetWidth,offsetHeight,scrollWidth,scrollHeight的含义。
各个属性的含义
页可见区域宽: 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;
信息提取与总结
- 对于 height,width 而言 ,client(可见区域) < offset(多个边框) < scroll(多个滚动区域)
- 对于 top,left 而言 ,offset 指的是相对于第一个 position 不为 static 的父元素(没有就是 document)的偏移距离,scroll 则是被卷去的长度。
- 对于 screen 而言 ,说的是屏幕的距离和宽高。
面试题:实现图片懒加载
思路:
初始化状态:图片使用默认图片地址; 当图片进入可见区域(图片的 offsetTop < 整个文档的 clientHeight + scrollTop):图片加载真实地址;
代码:
var num = document.getElementsByTagName('img').length; var img = document.getElementsByTagName("img"); var n = 0; //存储图片加载到的位置,避免每次都从第一张图片开始遍历 lazyload(); //页面载入完毕加载可是区域内的图片 window.onscroll = lazyload; function lazyload() { //监听页面滚动事件 var seeHeight = document.documentElement.clientHeight; //可见区域高度 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度 for (var i = n; i < num; i++) { if (img[i].offsetTop < seeHeight + scrollTop) { if (img[i].getAttribute("src") == "default.jpg") { img[i].src = img[i].getAttribute("data-src"); } n = i + 1; } } }
如果您觉得本博客帮到了您,就打赏支持一下吧~
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。