浏览器窗口内宽高

innerWidth、innerHeight

浏览器窗口（浏览器视口）的内宽高、不包括工具栏和滚动条（以像素计算） window.innerHeight 一个兼容性的写法是：

let w = window.innerWidth
        || document.documentElement.clientWidth
        || document.body.clientWidth

let h = window.innerHeight
        || document.documentElement.clientHeight
        || document.body.clientHeight

事件（event）的各种坐标

clientX、clientY

鼠标相对于浏览器窗口可视区域的水平，垂直坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性

pageY、pageX

页面坐标，在页面没有滚动的情况下，pageX和pageY与clientX和clientY的值是相等的。但是IE8及更早版本不支持页面坐标，可通过以下代码得到页面坐标，pageX=clientX+scrollLeft

screenX screenY

鼠标事件发生时鼠标指针相对于屏幕的水平和垂直坐标

offsetX offsetY

鼠标光标相对于目标元素边界的水平和垂直坐标。

元素(element)大小

clientWidth，clientHeight。

clientWidth，clientHeight：元素可视区部分，padding和width属性值之和，元素边框和滚动条不包括在内。

clientWidth = （content+padding）
clientHeight = （content+padding）

scrollWidth,scrollHeight

scrollWidth,scrollHeight：表示元素的总宽高，包括由于溢出而无法展示在网页的不可见部分

scrollWidth: 没有滚动条的情况下，元素内容的总高度 scrollHeight: 没有滚动条的情况下，元素内容的总宽度

通常获取一个在滚动区域的元素的内容高度，都是拿父元素的scrollHeight

scrollLeft、scrollTop

scrollLeft被隐藏在内容区域左侧的像素数

scrollTop被隐藏在内容区上方的像素数

无缝垂直滚动

<div>
    <div id="scrollParent">
        <div id="scroll1">000000000需要滚动的内容0000000000</div>
        <div id="scroll2"></div>
    <div>
<div>
<script>
    let scrollParent = document.getElementById('scrollParent');
    let scroll1 = document.getElementById('scroll1');
    let scroll2 = document.getElementById('scroll2');
    scroll2.innerHtml = scroll1.innerHtml;
    function move() {
        if (scroll1.offsetHeight - scrollParent.scrollTop <= 0){
            scrollParent.scrollTop -= scroll1.offsetHeight;
        }
        scrollParent.scrollTop ++
    }
    // 设置定时器
    setInterval("move()", 30);
</script>

offsetWidth，offsetHeight

offsetWidth，offsetHeight：元素在页面中占据的宽度总和，包括width，padding，border，滚动条宽高

offsetWidth = （content+padding+border）+ 滚动条宽 //元素在垂直方向上占用的空间大小，包括元素高度（内容+padding+border）和可见的水平滚动条的高度
offsetHeight =（content+padding+border）+ 滚动条高 //元素在水平方向上占用的空间大小，包括元素宽度（内容+padding+border）和可见的垂直滚动条的高度

offsetLeft、offsetTop

offsetLeft：元素的左外边框距离其包含元素的左内边框的像素距离

offsetTop：元素的左外边框距离其包含元素的左内边框的像素距离

例如：获取元素距离浏览器窗口顶部的距离

<div>
    <div id="targetDom">
    <div>
<div>
<script>
    let targetDom = document.getElementById('targetDom');
    console.log(getOffsetTop(targetDom)) // 打印
    function getOffsetTop(obj) {
        let locationV = 0;
        while(obj) {
            if (obj.nodeName === "HTML"){
                break;
            }
            locationV += obj.offsetTop;
            obj = obj.parentNode;
        }
        return locationV
    }
</script>

offsetParent

offsetParent：距离最近的拥有大小的祖先节点下面代码将算出某个元素在页面上的偏移量，思路是将该元素的offsetHeight和offsetWidth与其offsetParent的对应元素相加，一直循环至根节点，就可以得到一个基本准确的值

JS坐标位置