原理

  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的更多相关文章

  1. js利用offsetWidth和clientWidth来计算滚动条的宽度

    原文: http://www.haorooms.com/post/js_scroll_width 参考: https://www.cnblogs.com/benxiaohai-microcosm/p/ ...

  2. JS计算滚动条的宽度

    1.此方法检验成功 function getScrollbarWidth() { var oP = document.createElement('p'), styles = { width: '10 ...

  3. UITableView 一直显示滚动条(ScrollBar Indicators)、滚动条Width(宽度)、滚动条Color(颜色)

    在 IOS 中,对 UIScrollView 的滚动条(ScrollBar Indicators)的自定义设置接口,一直都是很少的.除了能自定义简单的样式(UIScrollViewIndicatorS ...

  4. 如何重载ComboBox 使其下拉按钮(带下箭头的)和下拉列表的垂直滚动条的宽度改变?(自绘ComboBox) [转]

    原文地址:http://bbs.csdn.net/topics/390135022 http://blog.csdn.net/scsdn/article/details/4363299 想使用winf ...

  5. 获取div滚动条的宽度

    获取滚动条的宽度: function getScrollWidth() { var noScroll, scroll, oDiv = document.createElement('div'); oD ...

  6. swift计算label动态宽度和高度

    swift计算label动态宽度和高度 func getLabHeigh(labelStr:String,font:UIFont,width:CGFloat) -> CGFloat { let ...

  7. javascript 获取滚动条高度+常用js页面宽度与高度

    /******************** * 取窗口滚动条高度  ******************/function getScrollTop(){    var scrollTop=0;    ...

  8. javascript 获取滚动条高度+常用js页面宽度与高度(转)

    /******************** *获取窗口滚动条高度 ******************/ function getScrollTop() { var scrollTop=0; if(d ...

  9. js获取滚动条的宽度

    function getScrollWidth() { var noScroll, scroll, oDiv = document.createElement("DIV"); oD ...

随机推荐

  1. 手把手教你基于SqlSugar4编写一个可视化代码生成器(生成实体,以SqlServer为例,文末附源码)

    在开发过程中免不了创建实体类,字段少的表可以手动编写,但是字段多还用手动创建的话不免有些浪费时间,假如一张表有100多个字段,手写有些不现实. 这时我们会借助一些工具,如:动软代码生成器.各种ORM框 ...

  2. 02 . Kubeadm部署Kubernetes及简单应用

    kubeadm部署Kubernetes kubeadm简介 # kubeadm是一位高中生的作品,他叫Lucas Kaldstrom,芬兰人,17岁用业余时间完成的一个社区项目: # kubeadm的 ...

  3. java异常处理之try_catch_finally

    java异常处理之try_catch_finally 看下面的一个列子: public class TestException { int goabl=1; public TestException( ...

  4. Idea中SpringBoot整合JSP

    最近在学习SpringBoot,看到SpringBoot整合jsp,顺带记录一下. 1.创建一个SpringBoot项目 点击Next 注意:packaging选中War,点击Next Webà选中W ...

  5. 八.django日志配置

    Django 日志 Django 使用Python 内建的logging 模块打印日志,Python 的logging 配置由四个部分组成: 记录器 —— Logger 处理程序 —— Handler ...

  6. linux下 解释 终端命令 ls -al或者ls -li 输出的信息

    $ ls -al            drwxr-xr-x.            wjshan0808    wjshan0808        Sep :    .cache $ ls -li ...

  7. Oracle Solaris 10下gdb安装(附安装包)

    文章目录 1. 背景说明 2. gdb相关包 3. gdb安装 3.1 上传资源 3.2 解压 3.3 安装 3.4 环境变量 4. 位数确认 5. 验证可用性 1. 背景说明 本文承接Oracle ...

  8. VMware Workstation安装centos

    begin 2020年7月4日16:32:34 今天我们是食神,来做一道菜,名曰VMware Workstation安装centos. 首先我们需要准备好锅和食材. 锅和食材 锅:VMware Wor ...

  9. 快速认识elasticsearch

    快速认识elasticsearch   what is Elasticsearch Elasticsearch被称为"Lucene穿了一件json的外衣"---把Lucene用Ne ...

  10. (二)LVS介绍

    LVS分3种模式  (a)NAT(网络地址映射):通过网络地址转换的方法来实现调度       优点:支持所有操作系统及私有网络,且只需一个公网 IP 地址       缺点:用户请求和响应报文都必须 ...