offset

offsetLeft、offsetTop

css属性，元素外边框相对于已定位的父级元素的距离(如果父级元素没有定位，那么相对于body)，该元素无需定位哦~
offsetWidth、offsetHeight

css属性,指宽高，包含 boder 、 padding 和 content。

如果将盒子模型设为border-box

那么width=border+padding+content offsetWidth=border+padding+content
e.offsetX、e.offsetY ----鼠标距离元素左侧边缘距离

事件属性，必须有event对象。event.offsetX|event.offsetY。

它表示：事件发生后鼠标距离目标元素即e.target左侧边缘的距离。

Client

clientWidth、clientHeight

css属性，该元素的左内边距到右内边距的距离 即padding+content 不包含border。(offsetWidth是包含padding+border+content)

如果将盒子模型设为border-box

那么width=border+padding+content clientWidth=width-border

clientLeft、clientTop

css属性，该元素的左边框宽度或者 上边框宽度

e.clientX、e.clientY

事件属性，必须有event对象。event.clientX|event.clientY。

它表示：事件发生后，鼠标相对于浏览器窗口视口左上角的水平坐标。

注意：是浏览器窗口，不是整个页面。需要和pageX进行区分

Scroll

scrollY已经被废弃，改为了e.pageYOffset

e.pageYOffset

window属性，使用方式：window.pageYOffset

获取页面滚动的距离

scrollLeft

css属性 ，表示一个元素滚动条在水平方向上的偏移量。当一个元素拥有滚动条时，scrollLeft属性可以返回这个滚动条在水平位置的偏移量

如果元素没有滚动条，则scrollLeft属性将始终为0。

scrollWidth
scrollHeight

当元素有滚动内容时，返回所有内容的实际高度

css属性，当一个元素有溢出内容后时，它返回所有内容的实际宽度

判断文字是否溢出可以通过scrollWidth>offsetWIdth来判断

scrollTop

当容器为滚动容器时， scrollTop:容器滚动的距离

window

window.innerWidth|innerHeight

浏览器可视窗口的宽度和高度

获取鼠标在页面中的位置

目标元素触发事件，e.clientX或者e.pageX

获取鼠标距离元素内部最左侧的距离

目标元素触发事件, e.offsetX

实现drag效果

   let son = document.querySelector('.son')
      son.addEventListener('mousedown', (e) => {
        //两种方式 获取鼠标按下时距离元素内部最左侧的距离
        let offsetX = e.offsetX
        let offsetY = e.offsetY
        /*
        方式二  但是注意，offsetLeft是距离已经定位的父级元素的距离，并不一定是距离最外层body的距离
               let offsetX = e.clientX - e.offsetLeft
        */
        //注意：需要document上监听事件，因为鼠标移速过快会脱离目标元素
        function move(event) {
          son.style.left = event.clientX - offsetX + 'px'
          son.style.top = event.clientY - offsetY + 'px'
        }
        document.addEventListener('mousemove', move)
        document.addEventListener('mouseup', () => {
          document.removeEventListener('mousemove', move)
        })
      })

判断是否滚动到容器底部

通过容器.scrollTop+可视区域容器高度容器.offsetHeight>=容器.scrollHeight

即滚动高度+容器高度是否大于容器滚动内容总高度。

注意：必须要>= 因为滚动的时候会有误差，会稍微大点

 if (scrollContainer.value.scrollTop + scrollContainer.value.offsetHeight >= scrollContainer.value.scrollHeight) {
}

offset、client、page、scroll