js 获取浏览器滚动条的宽度

@SIMIN

于 2020-06-01 18:09:27 发布

阅读量641

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/SIMIN_1617/article/details/106478957

js 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一个实用的JavaScript函数，用于精确测量网页中滚动条的宽度。通过创建一个临时div元素并添加到body中，函数计算并返回滚动条的实际宽度，这对于调整页面布局以适应不同设备和浏览器至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

  function getScrollbarWidth() {
      var odiv = document.createElement('div'),//创建一个div
          styles = {
              width: '100px',
              height: '100px',
              overflowY: 'scroll' //让div有滚动条
          }, i, scrollbarWidth;
      for (i in styles) odiv.style[i] = styles[i];
      document.body.appendChild(odiv);//把div添加到body中
      scrollbarWidth = odiv.offsetWidth - odiv.clientWidth;//相减
      console.log(odiv.offsetWidth)
      console.log(odiv.clientWidth)
      odiv.remove();//移除创建的div
      return scrollbarWidth;//返回滚动条宽度
    }
  console.log(getScrollbarWidth())