獲取瀏覽器原生滾動條寬度的方法
阿新 • • 發佈:2018-12-04
整體思路就是往body中插入一個div,div中再巢狀一個div,設定外部的div的overflower為scroll,
這樣就可以出現滾動條軌道,然後使用外部div寬度值減去內部div的寬度值即可了 。
得到滾動條寬度之後記得把新增的元素刪掉。
詳細如下程式碼
const getScrollBarWidth = () => { const outer = document.createElement("div"); outer.style.visibility = "hidden"; outer.style.width = "100px"; outer.style.position = "absolute"; outer.style.top = "-9999px"; document.body.appendChild(outer); // const widthNoScroll = outer.offsetWidth; outer.style.overflow = "scroll"; const inner = document.createElement("div"); inner.style.width = "100%"; outer.appendChild(inner); // const widthWithScroll = inner.offsetWidth; outer.parentNode.removeChild(outer); scrollBarWidth = widthNoScroll - widthWithScroll; return scrollBarWidth; };