本章主要标记的使React使用过程中获取滚动元素的相关小知识点，Mark一下，方便查阅。

监控页面滚动

useEffect(function(){
    window.addEventListener('scroll',function(e){
        // 滚动条滚动高度
        const scrollTop = document.documentElement.scrollTop;
        // 可视区域高度
        const clentHeight = document.documentElement.clientHeight;
        // 滚动内容高度
        const scrollHeight = document.documentElement.scrollHeight;
    })
  },[])

所以，即滚动到底部的判断条件就是 scrollHeight = clientHeight + scrollTop

获取页面元素的相关属性

const tabRef = useRef(null);

<div ref={tabRef}></div>

然后根据tabRef.current来获取各种属性

// 尺寸：
clientWidth  |  clientHeight     元素的内尺寸（width + padding）如果有滚动条，是可视区域高度
scrollWidth  |  scrollHeight      元素滚动内容的总高度
offsetWidth  |  offsetHeight     元素的外尺寸  (width + padding + border)
// 位置：
offsetLeft  |  offsetTop     元素相对于已定位父元素(offsetParent)的偏移量
offsetParent元素是指元素最近的定位（relative,absolute）父元素,可递归上溯，如果没有，返回body元素
tabRef.current.getBoundingClientRect()   返回元素的大小及其相对可视区域的位置
如：tabRef.current.getBoundingClientRect().left   从视口左端到元素左端边框的距离(不包含外边距)
scrollLeft  |  scrollTop     是指元素滚动条位置，它们是可写的

获取元素到页面顶部

获取元素到页面顶部的距离，原生js只能获取相对于父级的top值，所以需要递归获取offsetParent，直到最外层

const getTop = (e) => {  // e:dom元素
    var offset = e.offsetTop;
    if (e.offsetParent != null) offset += getTop(e.offsetParent);
    return offset;
}

滑动动画

const scrollAnimation = (top: number) => {  // top:滚动条的目标位置
    requestAnimationFrame(() => {
        if (Math.abs(document.documentElement.scrollTop - top) > 50) {
            if (document.documentElement.scrollTop > top) {
                document.documentElement.scrollTop = document.documentElement.scrollTop - 50;
            } else if (document.documentElement.scrollTop < top) {
                document.documentElement.scrollTop = document.documentElement.scrollTop + 50;
            }
            scrollAnimation(top);
        } else {
            document.documentElement.scrollTop = top;
        }
    });
}

浏览器滑动无效？兼容所有浏览器设置scrollTop的方法：

// 获取scrollTop的值，兼容所有浏览器 
function getScrollTop() {
    var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
    return scrollTop;
}

// 设置scrollTop的值，兼容所有浏览器 
function setScrollTop(scroll_top) {
    document.documentElement.scrollTop = scroll_top;
    window.pageYOffset = scroll_top;
    document.body.scrollTop = scroll_top;
}