文档坐标和视口坐标

发表于 | 分类于

文档坐标和视口坐标

1 二者区别

1.1 文档坐标是整个HTML 形成的坐标体系，视口是显示文档内容的 浏览器的一部分,它不包括浏览器的”外壳”，如菜单和工具栏和标签页

1.2 如果文档比视口要小，或者说文档还没有出现滚动，那么这个时候文档左上角就是视口左上角，文档坐标和视口坐标是同一个系统；

1.3 文档坐标是视口坐标更加基础，因为文档坐标系统是固定不变的，元素相对于文档坐标的位置是不变的；但是视口坐标系统就不一样了，元素相对于视口坐标的位置，在发生滚动的时候，是实时变化的；

2 获取窗口滚动条的位置

1
2
3
4
5
6
7
8
9
10
11
function getSCroll(){
    return {
      left : window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
      top : window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        }
    }
   window.onscroll = function(){
        var scroll = getSCroll();
        console.log(scroll.left);
        console.log(scroll.top);
    };

3 获取窗口的可视区域的宽高

1
2
3
4
5
6
7
8
9
10
11
12
function getClient(){
  return {
  width : window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
  height : window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight
	 }
  }
//在文档根元素查询这些属性的时候，返回的值和窗口的innerHeight innerWidth属性值一样
    window.onresize = function(){
        var client = getClient();
        console.log(client.width);
        console.log(client.height);
    };

4 获取文档内容的宽高

1
2
var documentHeight = document.documentElement.offsetHeight;
var documentWidth = document.documentElement.offsetWidth;

5 获取元素相对于视口坐标系统原点的距离

ele.getBoundingClientRect(); 返回一个数组,包括元素左上角和右下角距离视口坐标系统原点的距离，以及元素自身的宽高

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
	<style>
        div{
            position: absolute;
            left: 100px;
            top: 150px;
            background-color: pink;
            height: 100px;
            width: 100px;
        }
    </style>
<div id = "div1"></div>	
<script>
	var div1 = document.getElementById("div1");
    var box = div1.getBoundingClientRect();
    console.log(box);
</script>

6 获取元素相对于 文档坐标系统 原点 的 距离 ；

offsetLeft offsetTop 用来获取元素(border边界)左上角相对于文档坐标原点的距离

或者 相对于 定位了的父元素 的border边界左上角的距离；

1
2
3
4
5
6
7
8
9
10
11
function getElePos(ele){
        var x = 0,y = 0 ;
        while(ele != null ){
            x += ele.offsetLeft;
            y += ele.offsetTop;
            ele = ele.offsetParent;
            console.log(ele);
        }
        return {x : x ,y: y }
    }
//这个封装的方法可以获取任何元素相对于文档坐标系统原点的  x y 坐标值

对于不支持ele.getBoundingClientRect();获取元素相对于 视口坐标系统的浏览器来说 进行以下封装,用来获取元素相对于视口坐标系统的 x y的值 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function getElePos(ele){
        var x = 0,y = 0 ;
        for(var e = ele ; e != null ; e = e.offsetParent){
            x += e.offsetLeft;
            y += e.offsetTop;
            //获取元素相对于文档的坐标
        }
        for(var e = ele.parentNode ; e != null && e.nodeType == 1 ;e = e.parentNode){
            console.log(e);
            x -= e.scrollLeft;
            y -= e.scrollTop ;
          //减去元素卷曲出去距离
        }
        return {x : x ,y: y }
    }

5 滚动文档内容 window.scrollTo(x,y) window.scrollBy(x,y) 将文档内容滚动到距离 视口坐标左上角 x,y 处的位置；