JavaScript判断滚动条宽度

最新推荐文章于 2024-05-29 16:27:42 发布

原创最新推荐文章于 2024-05-29 16:27:42 发布 · 304 阅读

0 ·

CC 4.0 BY-SA版权

Web前端专栏收录该内容

85 篇文章

订阅专栏

本文介绍了一种使用JavaScript动态创建元素来测量浏览器滚动条宽度的方法。通过对比有无滚动条时的元素宽度差值，可以准确获取滚动条的实际宽度，这对于布局调整和响应式设计尤为重要。

function getBarWidth(){
    let outDiv = document.createElement("div");
    outDiv.style.width = "100px";
    outDiv.style.position = "absolute";
    outDiv.style.top = "-9999px";
    document.body.appendChild(outDiv);
    let widthnobar = outDiv.offsetWidth;
 
    outDiv.style.overflow = "scroll";
 
    let innerDiv = document.createElement("div");
    innerDiv.style.width = "100%";
    outDiv.appendChild(innerDiv);
    let widthbar = innerDiv.offsetWidth;
    
    document.body.removeChild(outDiv);
 
    return widthnobar - widthbar;
}