计算滚动条的宽度--js

简介: 计算滚动条的宽度--js
+关注继续查看

原理

  1. 创建两个div嵌套在一起
  2. 外层的div设置固定宽度和overflow:scroll
  3. 滚动条的宽度=外层div的offsetWidth-内层div的offsetWidth

image

实现代码

/**
 * 获取滚动条的宽度
 */
getScrollWidth() {
    const scroll = document.createElement("div");
    const scrollIn = document.createElement("div");
    scroll.appendChild(scrollIn);
    scroll.style.width = "100px";
    scroll.style.height = "50px";
    scroll.style.overflow = "scroll";
    scroll.style.marginLeft = "-100000px";
    document.body.appendChild(scroll);
    const scrollInWidth = scrollIn.offsetWidth;
    const scrollWidth = scroll.offsetWidth;
    const tmp = setTimeout(() => {
        document.body.removeChild(scroll);
        clearTimeout(tmp);
    }, 10);
    return scrollWidth - scrollInWidth;
}

相关文章
|
1月前
|
JavaScript 前端开发
JS 计算两个时间戳相差年月日时分秒
JS 计算两个时间戳相差年月日时分秒
10 0
|
2月前
|
JavaScript 前端开发
Javascript之计算众数和中位数
Javascript之计算众数和中位数
|
3月前
|
JavaScript
js计算时间差(小时和分钟)demo效果
js计算时间差(小时和分钟)demo效果
|
3月前
|
JavaScript
js根据一个时间计算N年后的时间-计算时间demo示例
js根据一个时间计算N年后的时间-计算时间demo示例
|
4月前
|
JavaScript
JS 计算两个时间之间的间隔(天、时、分、秒)
JS 计算两个时间之间的间隔(天、时、分、秒)
36 0
|
5月前
|
JavaScript
js计算数组中某个元素重复出现的个数
js计算数组中某个元素重复出现的个数
39 0
|
5月前
|
JavaScript 前端开发
javascript计算对象数组某项求和的封装函数
javascript计算对象数组某项求和的封装函数
50 0
|
5月前
|
JavaScript 前端开发
javascript计算某段代码大执行时间console.time()
javascript计算某段代码大执行时间console.time()
26 0
|
5月前
|
JavaScript 前端开发
javascript自动判断15位和18为身份证号计算年龄的解决方案
javascript自动判断15位和18为身份证号计算年龄的解决方案
40 0
|
5月前
|
JavaScript 前端开发
javascript时间函数的运用:根据开始时间和时间差来计算截至时间的解决方案
javascript时间函数的运用:根据开始时间和时间差来计算截至时间的解决方案
34 0
相关产品
云迁移中心
推荐文章
更多