计算滚动条的宽度–js
2023-06-13 09:12:08 时间
大家好,又见面了,我是你们的朋友全栈君。
原理
- 创建两个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;
}
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/154675.html原文链接:https://javaforall.cn
相关文章
- Fabric.js 使用纯色遮挡画布(前景色)
- 使用 Dapr JS SDK 让 Nest.js 集成 Dapr(微软开源的分布式应用程序运行时)
- html如何只刷新页面指定,js控制页面刷新 JS刷新当前页面的几种方法总结
- 【说站】js Number数据类型的介绍
- 四种情况下JS生存某个范围随机数
- JS计算颜色对比度
- js 数组去除重复数据-当WPS开始像支持VBA一样支持JS语言时,微软又该何去何从?
- JS如何计算两个时间之间的间隔
- Js删除字符串中的指定字符串详解编程语言
- JS技术连接Oracle数据库实现数据交互(js连接oracle实例)
- 数据JS技术实现实时获取Oracle数据(js实时获取oracle)
- Oracle中JS的优势让数据库性能提升(oracle中 js)
- 非常酷的js图形渐隐导航菜单栏
- 用JS剩余字数计算的代码
- 计算文本域剩佘长度的js代码
- 输入数量和价格自动计算输出金额的js代码
- js验证模型自我实现的具体方法
- js时间函数应用加、减、比较、格式转换的示例代码
- JS实现根据出生年月计算年龄
- js中精确计算加法和减法示例
- node.js中的Socket.IO使用实例
- php实现压缩多个CSS与JS文件的方法
- Node.js中的事件驱动编程详解