博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
元素宽高 offset、scroll 、client
阅读量:6434 次
发布时间:2019-06-23

本文共 754 字,大约阅读时间需要 2 分钟。

常见的场景就是 懒加载对这些个属性的使用 下面简单分下类通俗介绍下

offset

  • offsetWidth / offsetHeight 这个是自身的一个绝对宽度/ 高度

    元素自身的宽度(含border) width 属性值 + 左右 padding + 左右 border + 垂直滚动条宽度

  • offsetTop / offsetLeft 距离上方元素或者上方控件距离

    距离最近的 定位 父元素(顶部/左侧)距离 如果没有定位就是根元素body的(顶部/左侧)距离

scroll

  • scrollWidth / scrollHeight

    scrollWidth 滚动宽度 对象实际宽度 包括内容区和内边距,不包括边框。

    scrollHeight 滚动高度 对象实际高度 包括内容区和内边距,不包括边框。

  • scrollTop / scrollLeft

    scrollTop 就是被卷起的高度 元素的最顶端到 可见区域顶部的高度

    scrollLeft 就是被卷起左侧宽度 元素的最左边到 可见区域左侧的宽度

client

  • clientWidth / clientHeight

    可见区域的宽度高度 随窗口大小变化

  • clientTop / clientLeft

    元素的厚度 就是上左border 左border

getBoundingClientRect

const {width, height} = el.getBoundingClientRect()获取位置信息

懒加载部分代码

判断元素的offsetTop  跟可见区域高度+ scrollTop      element.offsetTop   document.body.clientHeight + document.body.scrollTop  复制代码

转载地址:http://gqxga.baihongyu.com/

你可能感兴趣的文章
你敢在post和get上刁难我,就别怪我装逼了
查看>>
直播 3.0 时代,在线教育行业的裂变和重构
查看>>
SpringBoot使用Nacos服务发现
查看>>
2017双11技术揭秘—阿里巴巴数据库技术架构演进
查看>>
我的友情链接
查看>>
Spring框架 - AOP使用
查看>>
Ansible常用内置属性
查看>>
C#使用正则表达式校验邮箱
查看>>
Linux自动清理N天前目录文件
查看>>
方便 快捷 安全的EVO邮件服务器
查看>>
bash的快捷键
查看>>
关于如何编写linux设备驱动
查看>>
DNS服务
查看>>
九州云开放“边缘云”能力 助力中国联通延展业务边界
查看>>
Linux进程状态(ps stat)之R、S、D、T、Z、X
查看>>
ME3750和普通3750的区别
查看>>
H3C交换系列之Super VLAN
查看>>
项目采购管理
查看>>
linux系统使用tomcat服务器部署web项目
查看>>
虚拟文件系统相关结构描述【续】
查看>>