1.獲取dom元素
<div ref={dom => { console.log(dom) }}></div>
2.dom元素的屬性
// 尺寸：
clientWidth | clientHeight 元素的內(nèi)尺寸（width + padding）如果有滾動(dòng)條，是可視區(qū)域高度
scrollWidth | scrollHeight 元素滾動(dòng)內(nèi)容的總高度
offsetWidth | offsetHeight 元素的外尺寸 (width + padding + border)
// 位置：
offsetLeft | offsetTop 元素相對于已定位父元素(offsetParent)的偏移量
offsetParent元素是指元素最近的定位（relative,absolute）父元素,可遞歸上溯载庭，如果沒有，返回body元素
ele.getBoundingClientRect() 返回元素的大小及其相對可視區(qū)域的位置
如：ele.getBoundingClientRect().left 從視口左端到元素左端邊框的距離(不包含外邊距)
scrollLeft | scrollTop 是指元素滾動(dòng)條位置廊佩，它們是可寫的
3.獲取元素到頁面頂部的距離囚聚，原生js只能獲取相對于父級(jí)的top值，所以需要遞歸獲取offsetParent标锄，直到最外層
const getTop = (e) => { // e:dom元素
var offset = e.offsetTop;
if (e.offsetParent != null) offset += getTop(e.offsetParent);
return offset;
}
4.滑動(dòng)動(dòng)畫
const scrollAnimation = (top: number) => { // top:滾動(dòng)條的目標(biāo)位置
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.瀏覽器滑動(dòng)無效顽铸？兼容所有瀏覽器設(shè)置scrollTop的方法：
// 獲取scrollTop的值，兼容所有瀏覽器
function getScrollTop() {
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
return scrollTop;
}
// 設(shè)置scrollTop的值料皇，兼容所有瀏覽器
function setScrollTop(scroll_top) {
document.documentElement.scrollTop = scroll_top;
window.pageYOffset = scroll_top;
document.body.scrollTop = scroll_top;
}
