JavaScript 鼠标坐标、元素尺寸、浏览器尺寸及坐标

鼠标坐标

客户端（可视）的鼠标坐标

MouseEvent.clientX；MouseEvent.clientY在元素上单击鼠标按钮时输出鼠标指针在窗口之间的坐标。                    

页面鼠标坐标page

光标到页面而非视口左边与上边的距离

MouseEvent.pageX属性返回鼠标位置与文档左侧边缘的距离（单位像素）。

MouseEvent.pageY属性返回与文档上侧边缘的距离（单位像素）。

元素鼠标-坐标offset

MouseEvent.offsetX属性返回鼠标位置与目标节点左侧的padding边缘的水平距离（单位像素），MouseEvent.offsetY属性返回与目标节点上方的padding边缘的垂直距离。这两个属性都是只读属性。

滚动尺寸

window.pageXOffset，window.pageYOffset

window.pageXOffset 只读属性，返回页面的水平滚动距离，单位为像素。

window.pageYOffset只读属性，返回页面的垂直滚动距离，单位为像素。

Element.scrollLeft，Element.scrollTop

Element.scrollLeft 可读可写属性，读取或设置元素的水平滚动条向右滚动的距离。

Element.scrollTop 可读可写属性，获取或设置元素的垂直滚动条向下滚动的距离。

对于那些没有滚动条的网页元素，这两个属性总是等于0。

元素的尺寸

Element.clientWidth，Element.clientHeight

Element.clientWidth 只读属性，返回元素节点的宽度（单位像素）

Element.clientHeight 只读属性，返回元素节点的高度（单位像素）。

这两个属性都只对块级元素生效，对于行内元素返回0。如果块级元素没有设置 CSS 宽度/高度，则返回元素实际的宽高。

除了元素本身的宽高，它还包括padding部分，但是不包括border、margin。如果有滚动条，还要减去滚动条的大小。注意，这个值始终是整数，如果是小数会被四舍五入。

Element.offsetWidth，Element.offsetHeight

Element.offsetHeight 只读属性，返回一个整数，表示元素的 CSS 垂直高度（单位像素），包括元素本身的高度、padding 和 border，以及水平滚动条的高度（如果存在滚动条）。

Element.offsetLeft 只读属性，返回当前元素左上角相对于Element.offsetParent节点的水平位移。Element.offsetTop 只读属性，返回垂直位移，单位为像素。通常，这两个值是指相对于父节点的位移。

    offsetWidth,offsetHeight  含padding，含border

    clientWidth,clientHeight  含padding，不含border

    scrollWidth,scrollHeight  含padding，不含border，若出现滚动条，含元素隐藏部分

元素的位置：相对于有定位方式（position的值是relative、absolute、fixed)的父级元素的位置：参考原点是有定位方式父元素的左上角

屏幕、浏览器和页面尺寸

screen.height,screen.width整个屏幕尺寸

screen.availWidth,screen.availHeight

screen.X,screenY浏览器相对于整个屏幕的位置

浏览器(用户)可视页面尺寸，不包括滚动条

document.documentElement.clientWidth,document.documentElement.clientHeight

整个html网页页面的尺寸，不包括滚动条

document.documentElement.scrollWidth,document.documentElement.scrollHeight

获取页面滚动的尺寸

document.documentElement.scrollLeft,document.documentElement.scrollTop

当滚动条滚动到页面的顶部时——scrollTop = 0

当滚动条滚动到页面的底部时

scrollHeight = clientHeight + scrollTop --> scrollTop = scrollHeight - clientHeight  

scroll(0,0);

scroll(0,document.documentElement.scrollHeight);

    scroll({

        left:0,

        top:0,

        behavior:'smooth'//滑动的动画

    })