javascript获取坐标/滚动/宽高/距离

坐标（鼠标/触摸）

   event.screenX        鼠标/触摸，相对于显示屏的X坐标
   event.screenY        鼠标/触摸，相对于显示屏的Y坐标

   event.clientX        鼠标/触摸，相对于浏览器视口的X坐标
   event.clientY        鼠标/触摸，相对于浏览器视口的Y坐标

   event.pageX          鼠标/触摸，相对于文档的X坐标(ie不支持)
   event.pageY          鼠标/触摸，相对于文档的Y坐标(ie不支持)

   event.offsetX        鼠标/触摸，相对于触发事件的X坐标(ie独有)
   event.offsetY        鼠标/触摸，相对于触发事件的Y坐标(ie独有)

滚动（窗口/页面）

   window.pageXOffset                        X轴滚动条，能向右滚动的距离（只读属性/IE需要9以上/PC和移动端都支持）
   window.pageYOffset                        Y轴滚动条，能向下滚动的距离（只读属性/IE需要9以上/PC和移动端都支持）

   document.body.scrollLeft                  X轴滚动条，能向右滚动的距离（仅移动端支持）
   document.body.scrollTop                   Y轴滚动条，能向下滚动的距离（仅移动端支持）

   document.documentElement.scrollTop        X轴滚动条，能向右滚动的距离（仅PC端支持）
   document.documentElement.scrollLeft       Y轴滚动条，能向下滚动的距离（仅PC端支持）

   document.scrollingElement.scrollTop       X轴滚动条，能向右滚动的距离（ie不支持）
   document.scrollingElement.scrollLeft      Y轴滚动条，能向下滚动的距离（ie不支持）

宽高（屏幕/游览器视口/页面）

   screen.width                     屏幕宽度
   screen.height                    屏幕高度
   screen.availWidth                屏幕可用宽度
   screen.availWidth                屏幕可用高度

   window.outerWidth                游览器宽度
   window.outerHeight               游览器高度
   window.innerWidth                游览器视口宽度
   window.innerHeight               游览器视口高度

   document.body.offsetWidth        页面宽度
   document.body.offsetHeight       页面高度
   document.body.clientWidth        页面可显示宽度
   document.body.clientHeight       页面可显示高度

宽高&距离（DOM）

   offsetWidth             元素宽度（可视内容区+滚动条+内边距+边框）
   offsetHeight            元素高度（可视内容区+滚动条+内边距+边框）
   offsetLeft              与相邻父级的左距离
   offsetTop               与相邻父级的上距离

   clientWidth             元素宽度（可视内容区+内边距）
   clientHeight            元素高度（可视内容区+内边距）
   clientLeft              内边距边缘与边框边缘的距离（左边框）
   clientTop               内边距边缘与边框边缘的距离（上边框）

   scrollWidth         元素宽度（可视内容区+滚动内容区+内边距）
   scrollHeight            元素高度（可视内容区+滚动内容区+内边距）
   scrollLeft              隐藏的滚动距离（待滚动距离）
   scrollTop               隐藏的滚动距离（待滚动距离）

   clientWidth/clientHeight和scrollWidth/scrollHeight存在游览器差异

宽高&位置（DOM）

   getBoundingClientRect()           返回元素的宽高与坐标集合
                                          ——宽高构成（可视内容区+内边距+边框） 
                                          ——坐标构成（left => 位移+外边距）（right => 位移+外边距+边框+内边距+可视内容区）

   getClientRects()               返回元素的数个矩形区域的类数组对象
                                          ——用于块级元素，则getClientRects()[0]和getBoundingClientRect()的属性返回相同的值
                                          ——用于内联元素，内联元素有多少行，该方法返回的对象有多少个成员
                                          ——这个方法主要用于判断行内元素是否换行，以及行内元素的每一行的位置偏移

   document.getClientRects(x, y)       返回当前文档上处于指定坐标位置最顶层的元素的最里层元素
                                          ——最顶层，指z-index最大的元素；最里层，是指最里层面的子元素
                                          ——这个方法可以用来检测元素是否发生重叠或是碰撞

临近父容器

   offsetParent 

获取与邻近父级的距离集合

   function getElementPosition(e) { 
       var x = 0, y = 0; 
       while (e != null) {
          x+=e.offsetLeft;
          y+=e.offsetTop;
          e=e.offsetParent; 
       } 
       return { x: x, y: y }; 
    }

   1.对于表格和内嵌框架布局的页面， 由于不同浏览器实现这些元素的方式不同， 得到的值并不精确
   2.当文档中含有滚动条的时候，该方法就不能正常工作了

转载于:https://www.cnblogs.com/kanyu/p/9838994.html