获取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预览链接，方便大家查验效果预览链接

github地址

实际使用时，直接使用 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=" ...

随机推荐

数据仓库系列之ETL过程和ETL工具
上周因为在处理很多数据源集成的事情一直没有更新系列文章,在这周后开始规律更新.在维度建模中我们已经了解数据仓库中的维度建模方法以及基本要素,在这篇文章中我们将学习了解数据仓库的ETL过程以及实用的ET ...
Kafka的消息会丢失和重复吗？——如何实现Kafka精确传递一次语义
我们都知道Kafka的吞吐量很大,但是Kafka究竟会不会丢失消息呢?又会不会重复消费消息呢? 图无人机实时监控有很多公司因为业务要求必须保证消息不丢失.不重复的到达,比如无人机实时监控系统, ...
Spring入门(十一)：Spring AOP使用进阶
在上篇博客中,我们了解了什么是AOP以及在Spring中如何使用AOP,本篇博客继续深入讲解下AOP的高级用法. 1. 声明带参数的切点假设我们有一个接口CompactDisc和它的实现类Blank ...
python爬取豆瓣首页热门栏目详细流程
记录一下爬取豆瓣热门专栏的经过,通过这篇文章,你能学会requests,HTMLParser,json的基本使用,以及爬取网页内容的基本思路. 使用模块 1,获取豆瓣首页代码:首先我们需要访问豆瓣页面 ...
【selenium】- 自动化测试必备工具FireBug&FirePath
本文由小编根据慕课网视频亲自整理,转载请注明出处和作者. 1. FireBug FireBug的安装: 如果使用Firefox浏览器的话,推荐使用较低版本,比如27-32.否则会报错. 点击右上角的菜 ...
洛谷P1273 有线电视网树上分组背包DP
P1273 有线电视网 )逼着自己写DP 题意:在一棵树上选出最多的叶子节点,使得叶子节点的值减去各个叶子节点到根节点的消耗 >= 0: 思路: 树上分组背包DP,设dp[u][k] 表示 ...
2018年全国多校算法寒假训练营练习比赛（第五场）H Tree Recovery
Tree Recovery 时间限制:C/C++ 1秒,其他语言2秒空间限制:C/C++ 131072K,其他语言262144K 64bit IO Format: %lld 链接:https://w ...
lightoj 1060 - nth Permutation（组合数+贪心）
题目链接:http://www.lightoj.com/volume_showproblem.php?problem=1060 题解:如果是不重复数的这些操作可以用康托展开的逆来求,如果是有重复数字出 ...
codeforces 459 C. Pashmak and Buses（思维）
题目链接:http://codeforces.com/problemset/problem/459/C 题意:有n个人,k辆车,d天要求没有两个人在d天都坐在一起.输出坐的方法. 题解:这题很有意思, ...
hdu 4513（Manacher）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4513 题解:就是在Manacher判断回文串的过程中添加一条条件 Ma[i + dp[i] - 2] ...

快速获取dom到body左侧和顶部的距离，简单粗暴无bug-getBoundingClientRect