JavaScript 获取元素的坐标详解

引言

一、 clientWidth、offsetWidth、scrollWidth 的区别

1 #test{
2 width: 100px;
3 height: 100px;
4 margin: 10px;
5 border: 10px solid #293482;
6 padding: 10px;
7 background-color: yellow;
8 overflow: auto;
9 }

clientWidth
offsetWidth
scrollWidth

二、clientTop、offsetTop、scrollTop 的区别

1 #container{
2 background-color: #F08D8D;
3 padding: 10px;
4 }
5 #test{
6 position: relative;
7 top: 10px;
8 width: 100px;
9 height: 100px;
10 margin: 20px;
11 border: 15px solid #293482;
12 padding: 10px;
13 background-color: yellow;
14 }

clientTop　
offsetTop
scrollTop

三、获取页面元素绝对定位坐标

　　此方法可以获取一个元素相对于一个父元素的定位，如果要获取元素在整张页面，直接传入 document 即可：

1 Position.getAbsolute(document, targetNode); //{left: left, right: right, top: top, bottom: bottom}

四、获取元素的可视区定位坐标

1 var Position = {};
2 (function () {
3 Position.getAbsolute = function (reference, target) {
4 var result = {
5 left: -target.clientLeft,
6 top: -target.clientTop
7 }
8 var node = target;
9 while(node != reference && node != document){
10 result.left = result.left + node.offsetLeft + node.clientLeft;
11 result.top = result.top + node.offsetTop + node.clientTop;
12 node = node.parentNode;
13 }
14 if(isNaN(reference.scrollLeft)){
15 result.right = document.documentElement.scrollWidth – result.left;
16 result.bottom = document.documentElement.scrollHeight – result.top;
17 }else {
18 result.right = reference.scrollWidth – result.left;
19 result.bottom = reference.scrollHeight – result.top;
20 }
21 return result;
22 }
23 Position.getViewport = function (target) {
24 var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
25 var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft;
26 var absolutePosi = this.getAbsolute(document, target);
27 var Viewport = {
28 left: absolutePosi.left – scrollLeft,
29 top: absolutePosi.top – scrollTop,
30 }
31 return Viewport;
32 }
33 })();

1 Postion.getViewport(targetNode);  //{left: left, top: top}

五、判断可视区域

1 var Position = {};
2 (function () {
3 Position.getAbsolute = function (reference, target) {
4 var result = {
5 left: -target.clientLeft,
6 top: -target.clientTop
7 }
8 var node = target;
9 while(node != reference && node != document){
10 result.left = result.left + node.offsetLeft + node.clientLeft;
11 result.top = result.top + node.offsetTop + node.clientTop;
12 node = node.parentNode;
13 }
14 if(isNaN(reference.scrollLeft)){
15 result.right = document.documentElement.scrollWidth – result.left;
16 result.bottom = document.documentElement.scrollHeight – result.top;
17 }else {
18 result.right = reference.scrollWidth – result.left;
19 result.bottom = reference.scrollHeight – result.top;
20 }
21 return result;
22 }
23 Position.getViewport = function (target) {
24 var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
25 var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft;
26 var windowHeight = window.innerHeight || document.documentElement.offsetHeight;
27 var windowWidth = window.innerWidth || document.documentElement.offsetWidth;
28 var absolutePosi = this.getAbsolute(document, target);
29 var Viewport = {
30 left: absolutePosi.left – scrollLeft,
31 top: absolutePosi.top – scrollTop,
32 right: windowWidth – (absolutePosi.left – scrollLeft),
33 bottom: windowHeight – (absolutePosi.top – scrollTop)
34 }
35 return Viewport;
36 }
37 })();

1 Position.getViewport(targetNode);  //{left: left, top: top, right: right, bottom: bottom}

1 var Position = {};
2 (function () {
3 Position.getAbsolute = function (reference, target) {
4 //因为我们会将目标元素的边框纳入递归公式中，这里先减去对应的值
5 var result = {
6 left: -target.clientLeft,
7 top: -target.clientTop
8 }
9 var node = target;
10 while(node != reference && node != document){
11 result.left = result.left + node.offsetLeft + node.clientLeft;
12 result.top = result.top + node.offsetTop + node.clientTop;
13 node = node.parentNode;
14 }
15 if(isNaN(reference.scrollLeft)){
16 result.right = document.documentElement.scrollWidth – result.left;
17 result.bottom = document.documentElement.scrollHeight – result.top;
18 }else {
19 result.right = reference.scrollWidth – result.left;
20 result.bottom = reference.scrollHeight – result.top;
21 }
22 return result;
23 }
24 Position.getViewport = function (target) {
25 var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
26 var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft;
27 var windowHeight = window.innerHeight || document.documentElement.offsetHeight;
28 var windowWidth = window.innerWidth || document.documentElement.offsetWidth;
29 var absolutePosi = this.getAbsolute(document, target);
30 var Viewport = {
31 left: absolutePosi.left – scrollLeft,
32 top: absolutePosi.top – scrollTop,
33 right: windowWidth – (absolutePosi.left – scrollLeft),
34 bottom: windowHeight – (absolutePosi.top – scrollTop)
35 }
36 return Viewport;
37 }
38 Position.isViewport = function (target) {
39 var position = this.getViewport(target);
40 //这里需要加上元素自身的宽高，因为定位点是元素的左上角
41 if(position.left + target.offsetWidth < 0 || position.top + target.offsetHeight < 0){
42 return false;
43 }
44 if(position.bottom < 0 || position.right < 0){
45 return false;
46 }
47 return true;
48 }
49 })();

1 Position.getAbsolute(document, targetNode);  //获取元素在文档流中的绝对坐标
2 Position.getViewport(targetNode);  //获取元素相对于浏览器视窗的坐标
3 Position.isViewport(targetNode);  //判断元素是否在浏览器视窗内

Chrome
FireFox
IE
Safari
Edge

Support
Support
IE8+ Support
Support
Support

扩展：图片懒加载

：http://www.linuxidc.com/Linux/2017-07/145610.htm

Published by cloud