快速获取dom到body左侧和顶部的距离，简单粗暴无bug-getBoundingClientRect
获取dom到body左侧和顶部的距离-getBoundingClientRect
平时在写js的时候，偶尔会需要用js来获取当前div到 body 左侧、顶部的距离。网上查一查，有很多都是通过offsetTop、offsetLeft来计算出来的。我按照网上的查到的资料用了一次，算出来了一堆错误答案。
下面我要分享的这个方法，兼容性很好（ie4都ok），而且很方便，不会算错。
这个方法就是 getBoundingClientRect。
1.getBoundingClientRect方法简介
getBoundingClientRect 返回的是一个 DOMRect 对象，是一组矩形集合，我们这次所使用的返回值主要是left、top、bottom和right。其余的返回值width、height、x、y这次用不到,就不再讨论。
使用方法如下：
let domToTop = dom.getBoundingClientRect().top // dom 的顶边到视口顶部的距离
let domToLeft = dom.getBoundingClientRect().left // dom 的左边到视口左边的距离
let domToBottom = dom.getBoundingClientRect().bottom // dom 的底边到视口顶部的距离
let domToRight = dom.getBoundingClientRect().right // dom 的右边到视口左边的距离
注意事项：
- 得到的值是相对于视口而言的，即如果页面的滚动位置发生变化，那么得到的top、left也会发生变化；如果需要计算到body边框的距离，需要再加上网页滚动条的长度。下面会给出完整例子。
- 这个方法返回的四个值都是相对于当前视口的左上角而言的。即top和bottom是dom的顶边和底边到视口的顶部的距离，同理left和right是相对于视口左边的距离。
兼容性
| 属性 | chrome | Edge | Firefox | IE | Opera | Safari |
|---|---|---|---|---|---|---|
| 基础属性：left、top、right、bottom | Yes | 12 | 3 | 4 | Yes | 6 |
| height、width | Yes | Yes | 3.5 | 9 | Yes | Yes |
| x、y | Yes | No | Yes | No | Yes | No |
2.计算到body左侧和顶部的距离
因为 getBoundingClientRect 可以获取到视口边界的距离，所以得到的值加上滚动条的长度，就可以得到距离body边界的距离。
demo预览链接，方便大家查验效果 预览链接
实际使用时，直接使用 getScrollPosition 和 getDomToViewPosition这两个方法就好，其余的方法只是为了更好地展现。帮到你的话，点个赞呗~
下面是完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
width: 110%;
height: 200%;
position: absolute;
top: 0;
left: 0;
border: 1px solid red;
}
.content {
width: 20%;
height: 30%;
position: absolute;
top: 30%;
left: 30%;
border: 1px solid blue;
}
.board {
position: absolute;
border: black 1px solid;
transform: translate(200px, 200px);
}
</style>
</head>
<body>
<div class="box">
<div class="content" id="content"></div>
</div>
<div class="board" id="board">
<div>展示板：距离body的边框距离 = 视口距离 + 滚动条长度</div>
<div>
<span>距离视口左侧距离：</span><span id="toViewLeft"></span>
</div>
<div>
<span>距离视口顶部距离：</span><span id="toViewTop"></span>
</div>
<div>
<span>滚动条水平方向的长度：</span><span id="scrollX"></span>
</div>
<div>
<span>滚动条垂直方向的长度：</span><span id="scrollY"></span>
</div>
<div>
<span>距离body左侧距离：</span><span id="toBodyLeft"></span>
</div>
<div>
<span>距离body顶部距离：</span><span id="toBodyTop"></span>
</div>
</div>
<script>
// 此方法是为元素添加事件，并做兼容处理
function addHandler (element, type, handler) {
if (element.addEventListener) { // DOM2级 事件处理程序，this 指向元素本身。按照添加的顺序正向执行
element.addEventListener(type, handler, false)
} else if (element.attachEvent) { // IE 事件处理程序，this 指向 window。按照添加的顺序反向执行
element.attachEvent('on' + type, handler)
} else { // DOM0级 事件处理程序。只能绑定一个事件处理程序
element['on' + type] = handler
}
}
// 获取 当前 滚动条的长度， 水平 && 垂直方向
function getScrollPosition () {
let x, y
if (!!window.pageXOffset) {
x = window.pageXOffset
y = window.pageYOffset
} else {
x = (document.documentElement || document.body.parentNode || document.body).scrollLeft
y = (document.documentElement || document.body.parentNode || document.body).scrollTop
}
return {x, y}
}
// 获取 dom 到视口左侧和顶部的相对位置
function getDomToViewPosition (id) {
var dom = document.getElementById(id)
let rectObject = dom.getBoundingClientRect()
return {
domToViewLeft: rectObject.left,
domToViewTop: rectObject.top
}
}
// 设置展示板的展示位置，随着滚动条的滚动自适应，始终相对于视口左侧和顶部距离 200px
function setDisplayBoardPosition () {
let {x, y} = getScrollPosition()
var board = document.getElementById('board')
let transform = 'translate(' + (200 + x) + 'px,' + (200 + y) + 'px)'
board.style.transform = transform
}
// 设置展示板的展示信息
function setDisplayBoardDetail () {
let {x, y} = getScrollPosition() // 获取滚动条长度
let {domToViewLeft, domToViewTop} = getDomToViewPosition('content') // 获取到视口的距离
// 在展示板中显示到视口的距离
document.getElementById('toViewLeft').innerText = domToViewLeft + 'px'
document.getElementById('toViewTop').innerText = domToViewTop + 'px'
// 在展示板中显示滚动条的长度
document.getElementById('scrollX').innerText = x + 'px'
document.getElementById('scrollY').innerText = y + 'px'
// 在展示板中显示距离body左侧、顶部的距离
document.getElementById('toBodyLeft').innerText = domToViewLeft + x + 'px'
document.getElementById('toBodyTop').innerText = domToViewTop + y + 'px'
}
// 设置展示板的相关信息
function setDisplayBoard () {
setDisplayBoardPosition() // 设置展示板的展示位置
setDisplayBoardDetail() // 设置展示板的详细信息
}
// 监听 window 的滚动事件，计算到视口和body左侧和顶部的距离，并且在展示板中展示
addHandler(window, 'scroll', setDisplayBoard)
</script>
</body>
</html>
最近在搞一个和前端程序员相关的公号，除了技术分享之外，也增加了对于职业发展、生活记录之类的文章，欢迎大家关注，一起聊天、吐槽，一起努力工作，认真生活！
快速获取dom到body左侧和顶部的距离，简单粗暴无bug-getBoundingClientRect的更多相关文章
- 模仿jquery--offset方法。原生JS获取任意元素到文档document顶部的距离
1.通过遍历目标节点.目标节点的父节点,依次溯源. 然后累加这些节点到其最近可定位的祖先节点的距离.向上直到document. 其中,需要使用到节点的offsetTop/offsetLeft属性,来获 ...
- 原生JS获取DOM 节点到浏览器顶部的距离或者左侧的距离
关于js获取dom 节点到浏览器顶/左部的距离,Jquery里面有封装好的offset().top/offset().left,只到父级的顶/左部距离position().top/position() ...
- vue 组件传递值以及获取DOM元素的位置信息
1.父组件 select_li.vue 1.1 父组件模板 <template> <div id='selectLi' ref="selectLi"> &l ...
- 快速获取雪碧图的图标样式插件 - gulp-css-spriter教程
如何快速把合成好的雪碧图,快速获取图标的样式呢? 用gulp-css-spriter很简单. 第一步: 在某个文件夹用shitf+鼠标右键 第二步: npm install gulp-css-spri ...
- 获取DOM元素到页面顶部的距离，亲测有效版本（转载）
原文:https://blog.csdn.net/u013764814/article/details/83825479 干脆点(博客就应该干脆,少扯皮) DOM元素有一个属性是offsetTop,表 ...
- angular学习笔记-angular中怎么获取dom元素
步骤分解: 第一步:给要获取的元素一个ng-model变量,并且绑定事件啦! <div class="home" ng-model="dirName" n ...
- HTML页面滚动时获取离页面顶部的距离2种实现方法
获取离滚动页面的顶部距离有两种方法一是DOM:而是jquery,具体的实现如下,感兴趣的朋友可以尝试操作下 方法一:DOM 复制代码 代码如下: <script> window.o ...
- JQ的offset().top与JS的getBoundingClientRect区别详解，JS获取元素距离视窗顶部可变距离
壹 ❀ 引 我在 JQ的offset().top与js的offsetTop区别详解 这篇博客中详细分析了JQ方法offset().top与JS属性offsetTop的区别,并得出了一条offset( ...
- vue $refs获取dom元素
1.今天做vue项目有个获取dom节点,主要目的是获取节点让滚动到顶部 首先在滑动容器去添加ref <div class="contentScroll" ref=" ...
随机推荐
- Streaming-大数据的未来
分享一篇关于实时流式计算的经典文章,这篇文章名为Streaming 101: The world beyond batch 那么流计算如何超越批处理呢? 从这几个方面说明:实时流计算系统,数据处理模式 ...
- 基于开源中文分词工具pkuseg-python，我用张小龙的3万字演讲做了测试
做过搜索的同学都知道,分词的好坏直接决定了搜索的质量,在英文中分词比中文要简单,因为英文是一个个单词通过空格来划分每个词的,而中文都一个个句子,单独一个汉字没有任何意义,必须联系前后文字才能正确表达它 ...
- DIY显示器篇------DIY教程
前言: DIY显示器是这几年才火起来的,或者说这几年在游戏圈火起来的.我第一次看到是在NGA上,一位玩PUBG的大佬自己DIY了一个显示器,27寸 2k 144 ips的屏幕,当时市面上只有四款显示器 ...
- 使用Sigar做后台服务器管理时，遇到的linux上的问题
首先是线下猛如虎,线上惨不忍赌........ 问题的出处是: function change() { /*获取cpu*/ $.ajax({ url: "http://localhost:8 ...
- 消息中间件——RabbitMQ（七）高级特性全在这里!（上）
前言 前面我们介绍了RabbitMQ的安装.各大消息中间件的对比.AMQP核心概念.管控台的使用.快速入门RabbitMQ.本章将介绍RabbitMQ的高级特性.分两篇(上/下)进行介绍. 消息如何保 ...
- （四十九）c#Winform自定义控件-下拉框（表格）
前提 入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章. GitHub:https://github.com/kwwwvagaa/NetWinformControl 码云:ht ...
- H5 API drawImage的参数
drawImage(this,120,0,180,150,0,0,180,150); //mg图片上的x坐标 img图片上的y坐标 剪切的宽 剪切的高 在canvas上的x坐标 在canvas上的y坐 ...
- Ms Sql server 主键并发冲突解决办法
问题原因,同事把表的自增长ID主键,改成是自定义的编号,没有严格的并发测试.在多线程同时插入数据时会引起主键冲突: 看了一些道友的文章,尝试了几个方法.经测试 使用 WITH(updlock) 可以 ...
- Leetcode之二分法专题-240. 搜索二维矩阵 II（Search a 2D Matrix II）
Leetcode之二分法专题-240. 搜索二维矩阵 II(Search a 2D Matrix II) 编写一个高效的算法来搜索 m x n 矩阵 matrix 中的一个目标值 target.该矩阵 ...
- ubuntu使用yum安装软件问题
其实ubuntu是不应该用yum来管理软件安装的,只是后来才发现的,这里记录一下尝试的过程. 一开始是想把windows桌面上的文件拖到xshell登录的ubuntu的目录中,但是没成功,参考http ...