单纯做个笔记

目录

1. 元素距离xxx的高度

2. 视口宽高

3. 浏览器滚动的相关知识点

1. 元素距离xxx的高度

元素相对于视口最上方的高度，随滚动而变化

ele.getBoundingClientRect().top

元素相对于文档最上方的绝对高度，不受滚动影响

ele.getBoundingClientRect().top + window.scrollY;

元素相对于有定位父级的高度，若没有就往上找，直到body

ele.offsetTop

2. 视口宽高

document.documentElement.clientWidth
document.documentElement.clientHeight

3. 浏览器滚动的一些知识点

监听滚动

window.onscroll 

获取Y轴滚动的距离

window.scrollY 

滚动到指定位置，可以选择是否平滑滚动

window.scrollTo( x, y )
window.scrollTo( { top: 100; behavior: "smooth" } ) 

滚动指定距离，同样可以指定是否平滑滚动

window.scrollBy( x, y ) // x y是偏移量
window.scrollBy({  top: 100,  left: 100,  behavior: "smooth" });