JS视口坐标，屏幕坐标，页面坐标分析

JS视口坐标，屏幕坐标，页面坐标分析

---

视口坐标

    clientX
    clientY

页面坐标

    pageX
    pageY

代码：

 console.log("视口坐标位置：","clientX:",e.clientX,"clientY:",e.clientY);
 console.log("屏幕坐标位置：","screenX:",e.screenX,"screenY:",e.screenY)
 console.log("页面坐标位置：","pageX:",e.pageX,"pageY:",e.pageY);
 console.log("页面滚动距离：",document.documentElement.scrollTop+document.body.scrollTop);
 console.log("视口+页面滚动：",e.clientY+document.documentElement.scrollTop+document.body.scrollTop)

结果：

屏幕坐标
其相对于电脑屏幕，对于活动的窗口浏览器，其没任何价值，则不细说了

定位和尺寸

---

元素
clientWidth，clientHeight ：元素可视区部分，padding和width属性值之和，元素边框和滚动条不包括在内。
offsetWidth，offsetHeight：元素在页面中占据的宽度总和，包括width，padding，border，滚动条宽高
scrollWidth,scrollHeight：表示元素的总宽高，包括由于溢出而无法展示在网页的不可见部分

scrollLeft，scrollTop： 元素滚动距离
clientX，clientY ： 以浏览器左上为原点
offsetX，offsetY：以事件源左上为原点，（ev.srcElement）