如何通过JS获取浏览器滚动条的宽度

如题:如何通过JS来获取浏览器滚动条的宽度?

首先我们来讲讲思路,在 body 标签中动态添加一个高为 200 像素,宽为100像素的 div ,设置 overflow 属性为scroll,这时它的右边和底部出现滚动条,再往该div标签中动态插入一个宽度为100%的div元素,然后取两者的offsetWidth属性值,做差就得到滚动条的宽度。

以下是代码实现

const getScrollBarWidth = () => {
      const outer = document.createElement('div');
      outer.style.overflow = 'scroll';
      outer.style.height='200px';
      outer.style.width = '100px';
      document.body.appendChild(outer);
      const widthNoScroll = outer.offsetWidth;

      console.log('widthNoScroll', widthNoScroll)
      
      const inner = document.createElement('div');
      inner.style.width = '100%';
      outer.appendChild(inner);

      const widthWithScroll = inner.offsetWidth;

      console.log('widthWithScroll', widthWithScroll)

      scrollBarWidth = widthNoScroll - widthWithScroll;

      console.log(scrollBarWidth)

      return scrollBarWidth;
    }
    getScrollBarWidth();

在浏览器的console输出

评论

还没有评论...留下你的评论!

Leave a Reply

Your email address will not be published. Required fields are marked *

Sidebar