html如何获取滚动条,js如何来实现获取滚动条宽度（代码示例）

本篇文章给大家带来的内容是关于js如何来实现获取滚动条宽度(代码示例)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

思路：通过创建一个元素，不要给元素设置边框，然后给元素设置overflowY:scroll，再根据元素的offsetWidth-clientWidth来计算滚动条宽度。

代码：

计算滚动条宽度

// 封装获取滚动条宽度的方法

function getScrollBarWidth() {

var el = document.createElement("p"),

styles = {

width: "100px",

height: "100px",

overflowY: "scroll"

// 这里很巧妙呀，先定义了一个styles对象，里面写了各种样式值，然后通过for in将这个对象的值赋给p元素的style对象

// 而不用通过style.width=***等来给p的样式对象赋值。

for (i in styles) {

el.style[i] = styles[i];

}

// 将元素加到body里面

document.body.appendChild(el);

var scrollBarWidth = el.offsetWidth - el.clientWidth;

//将添加的元素删除

el.remove();

return scrollBarWidth;

}

console.log(getScrollBarWidth()); // 注意这里imac得到的结果为0，因为imac的滚动条是没有宽度的。

html如何获取滚动条,js如何来实现获取滚动条宽度（代码示例）相关推荐

当前主要使用的python版本_如何获取当前使用的Python版本信息？（代码示例）
本篇文章主要给大家介绍如何获取当前Python版本,希望对需要的朋友有所帮助! 版本信息: 包含版本号的五个组件的元组:major,minor,micro,releaselevel和serial.除r ...
php 获取下拉框选中的文本,jQuery如何获取select选择的文本与值？（代码示例）...
本篇文章给大家带来的内容是关于jQuery如何获取select选择的文本与值,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 获取select : 获取select 选中的 text ...
如何通过 vba 获取工作簿所有sheet的名称给出代码示例
你可以使用下面这段代码来获取Excel工作簿中所有sheet的名称:Sub 获取工作簿Sheet名称() Dim i As Integer For i = 1 To Sheets.Count Debu ...
JS混淆加密介绍，以及简单代码示例
JS混淆加密介绍 1.将字符串转换为数字: 2.将数字转换为字符串: 3.将字符串转换为数字: 4.将数字转换为字符串: 5.总结 JS混淆加密是一种常用的安全加密技术,它可以将JavaScript代 ...
Hadoop hdfs文件块信息获取/文件重命名/修改文件的副本数量代码示例
java后台获取和js拼接展示信息
java后台获取和js拼接展示信息: html页面代码: <div class="results-bd"><table id="activityInfo ...
php获取post表单数据_PHP如何通过post方法来获取form表单中数据？（代码示例）
我们在网站开发过程中,通常都会遇到关于php form表单的相关操作.如php获取带有post提交方法的表单数据,这种该如何操作呢?如果大家有看过我[PHP如何通过get方法获得form表单数据?]这 ...
JS 实现元素颜色跟随滚动条变化
JS 实现元素颜色跟随滚动条变化灰色深浅变化滚动部分颜色部分完整JS代码彩色变化颜色部分修改修改后的彩色变化JS完整代码最近在学习JS开发,突然想实现这样一个效果,滚动条往下拉时元素颜 ...
js url参数的获取和设置以及删除
js url参数的获取和设置以及删除 //获取url参数的值:name是参数名function getQueryString(name) {var reg = new RegExp("(^| ...

html如何获取滚动条,js如何来实现获取滚动条宽度（代码示例）

html如何获取滚动条,js如何来实现获取滚动条宽度（代码示例）相关推荐

最新文章

热门文章