React中ref获取元素位置，并通过js滑动到对应位置

1.获取dom元素

<div ref={dom => { console.log(dom) }}></div>

2.dom元素的属性

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

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

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

4.滑动动画

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;
        }
    });
}

5.浏览器滑动无效？兼容所有浏览器设置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;
}