JavaScript元素位置与距离：client&scroll&offset&MouseEvent&滚动条宽度计算

Posted 2021-03-11 Island

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript元素位置与距离：client&scroll&offset&MouseEvent&滚动条宽度计算相关的知识，希望对你有一定的参考价值。

Window:

window.innerWidth:浏览器viewport视口宽，包括垂直滚动条

window.innerHeight:浏览器视口高，包括水平滚动条

window.outerWidth: 获取浏览器窗口外部的宽度。表示整个浏览器窗口的宽度，包括侧边栏（如果存在）、窗口镶边（window chrome）和调正窗口大小的边框

window.outerHeight:获取整个浏览器窗口的高度（单位：像素），包括侧边栏（如果存在）、窗口镶边（window chrome）和窗口调正边框（window resizing borders/handles）

client：

clientWidth：

对于body元素：滚动条在margin之外。clientWidth = content + padding

对于非body元素：滚动条在padding之内。

如果滚动条不存在，则clientWidth = content+padding

如果有滚动条。

假设元素右边有垂直滚动条。

如果paddingRight>=滚动条宽度，滚动条默认在padding中，则clientWidth包括滚动条（但因为在padding里所以不必额外计算），clentWidth = content+padding

如果paddingRight< 滚动条宽度，滚动条会挤占content空间,此时clientWidth不包括滚动条,clientWidth = content + padding - scrollWidth

综上，clientWidth到底包不包括滚动条，取决于padding和滚动条的大小关系，在默认情况下，如果paddingRight >=滚动条宽度就包括；小于就不包括，就要减去滚动条宽度

场景1：不存在滚动条，padding-right为100时,clientWidth = content + padding

场景2：存在滚动条，但padding为0时,clientWidth = content + padding - scrollWidth

场景3：存在滚动条，但padding小于滚动条宽度时,clientWidth = content + padding - scrollWidth

clientHeight：

类比同上。

clientLeft/clientTop:

元素的左border宽度，当文字方向为右至左且出现滚动条时（direction: rtl），需要加上滚动条宽度

clientLeft = border Width + scrollbar Width(对于行内元素这个值为0)

clientTop = borderTop

计算元素滚动条宽度：

对于非body元素，滚动条默认占padding的空间，当padding没有设置或者已经设置但是宽度小于滚动条，那么多余的宽度就会挤占content宽度
对于body元素，chrome的body缺省margin值是8px，浏览器滚动条处于body元素的margin之外
elem.offsetWidth - elem.borderLeftWidth - elem.borderRightWidth - elem.clientWidth

export default class myUtils {
     // 计算元素滚动条宽度(默认clientWidth包括滚动条的情况)
     static getScrollWidth(elemOrSelect) {
        if (!elemOrSelect) return;
        if (elemOrSelect.constructor === String) 
　　　　　　　elemOrSelect = document.querySelector(elemOrSelect);
        //参数为html或body时
        if (/BODY|HTML/.test(elemOrSelect.nodeName)) {
            elemOrSelect.style.margin = 0;
            return window.innerWidth - elemOrSelect.clientWidth;
        }
        //兼容IE
        var style = elemOrSelect.currentStyle ? elemOrSelect.currentStyle : getComputedStyle(elemOrSelect).style;
        //获取某个元素滚动条宽度
        var width =
            elemOrSelect.offsetWidth
            - Math.ceil(parseFloat(style.borderLeftWidth))
            - Math.ceil(parseFloat(style.borderRightWidth))
            - elemOrSelect.clientWidth;
        return width;
    }
}