getBoundingClientRect介紹

getBoundingClientRect用於獲取元素相對與瀏覽器視口的位置

因爲getBoundingClientRect()已是w3c標準，因此不用擔憂兼容，不過在ie下仍是有所區別

{
    top: '元素頂部相對於視口頂部的距離',
    bottom: '元素底部相對於視口頂部的距離',
    left: '元素左邊相對於視口左邊的距離',
    right: '元素右邊相對於視口左邊的距離',
    height: '元素高度',
    width: '元素寬度'
}

// 兼容寫法
function getClientReat(client) {
    const { top, bottom, left, right, height, width } = client.getBoundingClientRect()
    return {
        top,
        bottom,
        left,
        right,
        height: height || bottom - top,
        width:    width || right - left
    }
}