计算滚动条的宽度--js
原理
- 创建两个div嵌套在一起
- 外层的div设置固定宽度和overflow:scroll
- 滚动条的宽度=外层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的更多相关文章
- js利用offsetWidth和clientWidth来计算滚动条的宽度
原文: http://www.haorooms.com/post/js_scroll_width 参考: https://www.cnblogs.com/benxiaohai-microcosm/p/ ...
- JS计算滚动条的宽度
1.此方法检验成功 function getScrollbarWidth() { var oP = document.createElement('p'), styles = { width: '10 ...
- UITableView 一直显示滚动条(ScrollBar Indicators)、滚动条Width(宽度)、滚动条Color(颜色)
在 IOS 中,对 UIScrollView 的滚动条(ScrollBar Indicators)的自定义设置接口,一直都是很少的.除了能自定义简单的样式(UIScrollViewIndicatorS ...
- 如何重载ComboBox 使其下拉按钮(带下箭头的)和下拉列表的垂直滚动条的宽度改变?(自绘ComboBox) [转]
原文地址:http://bbs.csdn.net/topics/390135022 http://blog.csdn.net/scsdn/article/details/4363299 想使用winf ...
- 获取div滚动条的宽度
获取滚动条的宽度: function getScrollWidth() { var noScroll, scroll, oDiv = document.createElement('div'); oD ...
- swift计算label动态宽度和高度
swift计算label动态宽度和高度 func getLabHeigh(labelStr:String,font:UIFont,width:CGFloat) -> CGFloat { let ...
- javascript 获取滚动条高度+常用js页面宽度与高度
/******************** * 取窗口滚动条高度 ******************/function getScrollTop(){ var scrollTop=0; ...
- javascript 获取滚动条高度+常用js页面宽度与高度(转)
/******************** *获取窗口滚动条高度 ******************/ function getScrollTop() { var scrollTop=0; if(d ...
- js获取滚动条的宽度
function getScrollWidth() { var noScroll, scroll, oDiv = document.createElement("DIV"); oD ...
随机推荐
- 手把手教你基于SqlSugar4编写一个可视化代码生成器(生成实体,以SqlServer为例,文末附源码)
在开发过程中免不了创建实体类,字段少的表可以手动编写,但是字段多还用手动创建的话不免有些浪费时间,假如一张表有100多个字段,手写有些不现实. 这时我们会借助一些工具,如:动软代码生成器.各种ORM框 ...
- 02 . Kubeadm部署Kubernetes及简单应用
kubeadm部署Kubernetes kubeadm简介 # kubeadm是一位高中生的作品,他叫Lucas Kaldstrom,芬兰人,17岁用业余时间完成的一个社区项目: # kubeadm的 ...
- java异常处理之try_catch_finally
java异常处理之try_catch_finally 看下面的一个列子: public class TestException { int goabl=1; public TestException( ...
- Idea中SpringBoot整合JSP
最近在学习SpringBoot,看到SpringBoot整合jsp,顺带记录一下. 1.创建一个SpringBoot项目 点击Next 注意:packaging选中War,点击Next Webà选中W ...
- 八.django日志配置
Django 日志 Django 使用Python 内建的logging 模块打印日志,Python 的logging 配置由四个部分组成: 记录器 —— Logger 处理程序 —— Handler ...
- linux下 解释 终端命令 ls -al或者ls -li 输出的信息
$ ls -al drwxr-xr-x. wjshan0808 wjshan0808 Sep : .cache $ ls -li ...
- Oracle Solaris 10下gdb安装(附安装包)
文章目录 1. 背景说明 2. gdb相关包 3. gdb安装 3.1 上传资源 3.2 解压 3.3 安装 3.4 环境变量 4. 位数确认 5. 验证可用性 1. 背景说明 本文承接Oracle ...
- VMware Workstation安装centos
begin 2020年7月4日16:32:34 今天我们是食神,来做一道菜,名曰VMware Workstation安装centos. 首先我们需要准备好锅和食材. 锅和食材 锅:VMware Wor ...
- 快速认识elasticsearch
快速认识elasticsearch what is Elasticsearch Elasticsearch被称为"Lucene穿了一件json的外衣"---把Lucene用Ne ...
- (二)LVS介绍
LVS分3种模式 (a)NAT(网络地址映射):通过网络地址转换的方法来实现调度 优点:支持所有操作系统及私有网络,且只需一个公网 IP 地址 缺点:用户请求和响应报文都必须 ...