JavaScript 基础：scrollTop,offsetTop,scrollLeft,offsetLeft,clientWidth,clientHeight,offsetW...

栏目: JavaScript · 发布时间: 6年前

内容简介：今天，我们要讲的是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;

JavaScript 基础：scrollTop,offsetTop,scrollLeft,offsetLeft,clientWidth,clientHeight,offsetW...

信息提取与总结

对于 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;
        }
    }
}

如果您觉得本博客帮到了您，就打赏支持一下吧～

JavaScript 基础：scrollTop,offsetTop,scrollLeft,offsetLeft,clientWidth,clientHeight,offsetW...

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

物联网导论（第2版）

刘云浩 / 科学出版社 / 2013-8 / 45.00元

物联网是一个基于互联网、传统电信网等信息承载体，让所有能够被独立寻址的普通物理对象实现互联互通的网络。它具有普通对象设备化、自治终端互联化和普适服务智能化三个重要特征。《物联网工程专业系列教材：物联网导论（第2版）》从物联网的感知识别层、网络构建层、管理服务层和综合应用层这四层分别进行阐述，深入浅出地为读者拨开萦绕于物联网这个概念的重重迷雾，引领求知者渐渐步入物联网世界，帮助探索者把握第三......一起来看看《物联网导论（第2版）》这本书的介绍吧!

码农工具