码迷,mamicode.com
首页 > Web开发 > 详细

计算滚动条的宽度--js

时间:2020-07-21 14:16:02      阅读:97      评论:0      收藏:0      [点我收藏+]

标签:setw   pre   宽度   png   remove   嵌套   off   原理   turn   

原理

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

技术图片

实现代码

/**
 * 获取滚动条的宽度
 */
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;
}

计算滚动条的宽度--js

标签:setw   pre   宽度   png   remove   嵌套   off   原理   turn   

原文地址:https://www.cnblogs.com/guojikun/p/13354245.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!