距离

元素尺寸属性

元素尺寸属性	说明
offsetWidth	元素在页面中占据的宽度总和，包括 width、padding、border 以及滚动条的宽度
offsetHeight	元素在页面中占据的高度总和，包括 height、padding、border 以及滚动条的宽度
clientWidth	获取元素可视部分的宽度，即 CSS 的 width 和 padding 属性值之和，元素边框和滚动条不包括在内，也不包含任何可能的滚动区域
clientHeight	获取元素可视部分的高度，即 CSS 的 height 和 padding 属性值之和，元素边框和滚动条不包括在内，也不包含任何可能的滚动区域
scrollWidth	当元素设置了 overflow:visible 样式属性时，元素的总宽度，也称滚动宽度。在默认状态下，如果该属性值大于 clientWidth 属性值，则元素会显示滚动条，以便能够翻阅被隐藏的区域
scrollHeight	当元素设置了 overflow:visible 样式属性时，元素的总高度，也称滚动高度。在默认状态下，如果该属性值大于 clientWidth 属性值，则元素会显示滚动条，以便能够翻阅被隐藏的区域

元素距离属性

元素距离属性	说明
scrollTop	顶部卷入了多少 , xxx.scrollTop = 100 顶部卷入100
scrollLeft	左侧卷入了多少
offsetTop	offsetTop 是相对于 offsetParent（最近的定位祖先元素），而不是相对于直接父级，更不是相对于视口
offsetLeft	同上

判断是否滚动到底

if (containerElement.scrollHeight - containerElement.scrollTop === containerElement.clientHeight) {
  console.log('已到底部');
}

获取元素距离（整体视口、整体文档）顶部的距离，

const rect = element.getBoundingClientRect();

const x = rect.left;
const y = rect.top;
console.log(`视口坐标: X=${x}, Y=${y}`);

const domX = rect.x + window.scrollX;
const domY = rect.y + window.scrollY;
console.log(`文档坐标: X=${domX}, Y=${domY}`);

滚动(container包括son)

// 滚动到多少
container.scrollTo({
  top: 200,
  left: 0,
  behavior: 'smooth'
})
// 滚动加多少
container.scrollBy({
  top: 200,
  left: 0,
  behavior: 'smooth'
})

特殊

    // window.scrollY //window接口的只读scrollY属性返回文档当前垂直滚动的像素数
    // window.scrollX
    // window.scrollTo(x,y);