getBoundingClientRect使用指南
getBoundingClientRect使用指南
author: @TiffanysBear
主要介绍getBoundingClientRect的基本属性,以及具体的使用场景和一些需要注意的问题。
getBoundingClientRect
Element.getBoundingClientRect()
含义:
方法返回元素的大小及其相对于视口的位置。
值:
返回值是一个 DOMRect 对象,这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合, 即:是与该元素相关的CSS 边框集合。
属性值:
- top: 元素上边距离页面上边的距离
- left: 元素右边距离页面左边的距离
- right: 元素右边距离页面左边的距离
- bottom: 元素下边距离页面上边的距离
- width: 元素宽度
- height: 元素高度
注意:
如果所有的元素边框都是空边框,那么这个矩形给该元素返回的 width、height 值为0,left、top值为第一个css盒子(按内容顺序)的top-left值。
当计算边界矩形时,会考虑视口区域(或其他可滚动元素)内的滚动操作,也就是说,当滚动位置发生了改变,top和left属性值就会随之立即发生变化(因此,它们的值是相对于视口的,而不是绝对的)。如果你需要获得相对于整个网页左上角定位的属性值,那么只要给top、left属性值加上当前的滚动位置(通过window.scrollX和window.scrollY),这样就可以获取与当前的滚动位置无关的值。
如图所示:
当页面的元素在浏览器的左上角时,得到的top和left值为负值,right和bottom值为正值。
应用场景一
1、获取dom元素相对于网页左上角定位的距离
以前的写法是通过offsetParent找到元素到定位父级元素,直至递归到顶级元素body或html。
// 获取dom元素相对于网页左上角定位的距离
function offset(el) {
var top = 0;
var left = 0;
// 获取元素的位置还有getBoundingClientRect的方法
// 从网上得知offset的兼容较差而且设置translate3D的y轴值给元素定位了y轴的距离后
//会出现offsetTop为0
do {
top += el.offsetTop;
left += el.offsetLeft;
}
while(el = el.offsetParent);// 存在兼容性问题,需要兼容
return {
top: top,
left: left
}
}
测试代码如下:
var odiv = document.getElementsByClassName('markdown-body');
offset(a[0]); // {top: 271, left: 136}
现在根据getBoundingClientRect这个api,可以写成这样:
var positionX = this.getBoundingClientRect().left + document.documentElement.scrollLeft;
var positionY = this.getBoundingClientRect().top + document.documentElement.scrollLeft;
应用场景二
2、判断元素是否在可视区域内
function isElView(el) {
var top = el.getBoundingClientRect().top; // 元素顶端到可见区域顶端的距离
var bottom = el.getBoundingClientRect().bottom; // 元素底部端到可见区域顶端的距离
var se = document.documentElement.clientHeight; // 浏览器可见区域高度。
if (top < se && bottom > 0) {
return true;
}
else if (top >= se || bottom <= 0) {
// 不可见
}
return false;
}
缺点
这个属性频繁计算会引发页面的重绘,可能会对页面的性能造成影响。
getBoundingClientRect使用指南的更多相关文章
- 【WebGL】《WebGL编程指南》读书笔记——第2章
一.前言 最近看了<WebGL编程指南>这本书,发现还是很有意思的,故每章阅读后做个笔记. 二.正文 Example1:在canvas中绘制矩形 <!DOCTYPE html> ...
- 企业IT管理员IE11升级指南【8】—— Win7 IE8和Win7 IE11对比
企业IT管理员IE11升级指南 系列: [1]—— Internet Explorer 11增强保护模式 (EPM) 介绍 [2]—— Internet Explorer 11 对Adobe Flas ...
- WebGL编程指南案例解析之绘制一个点
<!DOCTYPE html> <html> <head> <title>webgl</title> <style type=&quo ...
- 《Vue.js 2.x实践指南》 已出版
<Vue.js 2.x实践指南>其实在一年前就已经完稿了,只是由于疫情的缘故耽搁了很久才下厂印刷.阅读本书需要具备HTML.CSS和JS基础,本书针对的用户群体主要是:想要快速学习vue技 ...
- JavaScript权威指南 - 函数
函数本身就是一段JavaScript代码,定义一次但可能被调用任意次.如果函数挂载在一个对象上,作为对象的一个属性,通常这种函数被称作对象的方法.用于初始化一个新创建的对象的函数被称作构造函数. 相对 ...
- UE4新手之编程指南
虚幻引擎4为程序员提供了两套工具集,可共同使用来加速开发的工作流程. 新的游戏类.Slate和Canvas用户接口元素以及编辑器功能可以使用C++语言来编写,并且在使用Visual Studio 或 ...
- JavaScript权威指南 - 对象
JavaScript对象可以看作是属性的无序集合,每个属性就是一个键值对,可增可删. JavaScript中的所有事物都是对象:字符串.数字.数组.日期,等等. JavaScript对象除了可以保持自 ...
- JavaScript权威指南 - 数组
JavaScript数组是一种特殊类型的对象. JavaScript数组元素可以为任意类型,最大容纳232-1个元素. JavaScript数组是动态的,有新元素添加时,自动更新length属性. J ...
- const extern static 终极指南
const extern static 终极指南 不管是从事哪种语言的开发工作,const extern static 这三个关键字的用法和原理都是我们必须明白的.本文将对此做出非常详细的讲解. co ...
随机推荐
- ARM微控制器与嵌入式系统
个牛人在ARM实现嵌入式系统的过程 第一章 概览 1.1课程概览 认识ARM嵌入式系统(什么是ARM?什么是嵌入式系统?) 备战智能车 在科技活动中玩起来 积累计算机.电路基础知识 1.2如何学好嵌 ...
- graph Laplacian 拉普拉斯矩阵
转自:https://www.kechuang.org/t/84022?page=0&highlight=859356,感谢分享! 在机器学习.多维信号处理等领域,凡涉及到图论的地方,相信小伙 ...
- element-ui组件,全选树节点,新增数据子节点数据,出现回填问题
案情分析:全选后父节点被选中保存,在这个树节点下新增数据时,就会出现,也被选中,事实上数据是没有被选中,也就意味着权限未被配置,而显示是已经配置了,显然这个是一个bug 1.处理前,直接用下面的方法很 ...
- bond模式详解
目录 bond模式详解 一.什么是bond? 二.为什么使用bond? 三.bond模式配置 1.配置linux bond 2.将bond绑定到ovs上面(可选) 四.bond模式 1.模式0 2.模 ...
- c# 引用与对象举例
- 禁止html页面返回上一层
两种方式: // 方式一 触发返回上一层页面事件,只会重新加载当前页面 window.addEventListener('pageshow', function(e) { if (e.persiste ...
- openpose-opencv 的body数据多人体姿态估计
介绍 opencv除了支持常用的物体检测模型和分类模型之外,还支持openpose模型,同样是线下训练和线上调用.这里不做特别多的介绍,先把源代码和数据放出来- 实验模型获取地址:https://gi ...
- js 正则表达式将 p标签替换 span标签
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- webpac4k运行webpack .\src\main.js .\dist\bundle.js打包出错
打包的命令格式:webpack 要打包的文件的路径 打包好的输出文件的路径 运行webpack .\src\main.js .\dist\bundle.js 提示错误,错误信息如下: WARNING ...
- webpack4 Cannot find module '@babel/core'
Error: // webpackCannot find module '@babel/core'解决办法一: 原因"babel-loader": "^8.0.0&quo ...