js取滚动条的尺寸的函数代码


Posted in Javascript onNovember 30, 2011

这个比较简单,做个记录而已。

创建一个嵌套节点,让外层节点产生滚动条,然后用offsetWidth - clientWidth即可获得滚动条宽度。需要注意的是为了避免页面抖动,可以设置外层元素position:absolute和visibility:hidden

参考:

function getScrollWith(){ 
var wrap = setAttributes(document.createElement('div'),{ 
style : { 
width : '200px', 
height: '200px', 
overflow: 'auto', 
position:'absolute', 
visibility:'hidden' 
} 
}) 
var inner = setAttributes(document.createElement('div'),{ 
style : { 
width : '100px', 
height: '2000px' 
} 
}) 
document.body.appendChild(wrap); 
wrap.appendChild(inner); 
var w = wrap.offsetWidth - wrap.clientWidth; 
document.body.removeChild(wrap); 
wrap = null; 
inner = null; 
return w; 
} 
function setAttributes(elem,opts){ 
for(var key in opts){ 
if(typeof opts[key] == 'string'){ 
elem[key] = opts[key]; 
}else{ 
if(!elem[key]){ 
elem[key] = {}; 
} 
setAttributes(elem[key],opts[key]); 
} 
} 
return elem; 
}
Javascript 相关文章推荐
javascript date格式化示例
Sep 25 Javascript
js中document.write使用过程中的一点疑问解答
Mar 20 Javascript
js图片模糊切换显示特效的方法
Feb 17 Javascript
JS运动基础框架实例分析
Mar 03 Javascript
js实时获取并显示当前时间的方法
Jul 31 Javascript
js+ajax实现获取文件大小的方法
Dec 08 Javascript
AngularJS 使用$sce控制代码安全检查
Jan 05 Javascript
vue实现可增删查改的成绩单
Oct 27 Javascript
Vue.directive自定义指令的使用详解
Mar 10 Javascript
Mint UI 基于 Vue.js 移动端组件库
Nov 07 Javascript
vue filters的使用详解
Jun 11 Javascript
如何在vue中使用video.js播放m3u8格式的视频
Feb 01 Vue.js
window.event快达到全浏览器支持了,以后使用就方便了
Nov 30 #Javascript
图片在浏览器中底部对齐 解决方法之一
Nov 30 #Javascript
用Javascript评估用户输入密码的强度实现代码
Nov 30 #Javascript
用Javascript评估用户输入密码的强度(Knockout版)
Nov 30 #Javascript
Ubuntu 11.10 安装Node.js的方法
Nov 30 #Javascript
JavaScript中数组的排序、乱序和搜索实现代码
Nov 30 #Javascript
js常用代码段整理
Nov 30 #Javascript
You might like
php版小黄鸡simsimi聊天机器人接口分享
2014/01/26 PHP
PHP中的reflection反射机制测试例子
2014/08/05 PHP
PHP实现抓取迅雷VIP账号的方法
2015/07/30 PHP
java微信开发之上传下载多媒体文件
2016/06/24 PHP
彻底搞懂PHP 变量结构体
2017/10/11 PHP
javascript attachEvent绑定多个事件执行顺序问题
2010/10/20 Javascript
jquery 为a标签绑定click事件示例代码
2014/06/23 Javascript
JavaScript中消除闭包的一般方法介绍
2015/03/16 Javascript
jQuery焦点图轮播效果实现方法
2016/12/19 Javascript
简单的JS控制button颜色随点击更改的实现方法
2017/04/17 Javascript
JS实现汉字与Unicode码相互转换的方法详解
2017/04/28 Javascript
Vue项目中设置背景图片方法
2018/02/21 Javascript
vue 虚拟dom的patch源码分析
2018/03/01 Javascript
JS求1到任意数之间的所有质数的方法详解
2019/05/20 Javascript
学习LayUI时自研的表单参数校验框架案例分析
2019/07/29 Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
2019/09/25 Javascript
浅谈Vue组件单元测试究竟测试什么
2020/02/05 Javascript
原生js实现ajax请求和JSONP跨域请求操作示例
2020/03/14 Javascript
基于javascript处理nginx请求过程详解
2020/07/07 Javascript
微信小程序实现弹幕墙(祝福墙)
2020/11/18 Javascript
Python version 2.7 required, which was not found in the registry
2014/08/26 Python
Python 16进制与中文相互转换的实现方法
2018/07/09 Python
Win10下python 2.7.13 安装配置方法图文教程
2018/09/18 Python
python with (as)语句实例详解
2020/02/04 Python
HTML5 SEO优化的一些建议
2020/08/27 HTML / CSS
计算机开发个人求职信范文
2013/09/26 职场文书
光电信息专业应届生求职信
2013/10/07 职场文书
医院后勤自我鉴定
2013/10/13 职场文书
外贸销售员求职的自我评价
2013/11/23 职场文书
彩色的非洲教学反思
2014/02/18 职场文书
企业节能减排实施方案
2014/03/19 职场文书
2014年教师学期工作总结
2014/11/08 职场文书
检讨书怎么写
2015/05/07 职场文书
观看《杨善洲》宣传教育片心得体会
2016/01/23 职场文书
英国数字版游戏销量周榜公布 《小缇娜的奇幻之地》登顶
2022/04/03 其他游戏
使用CSS实现百叶窗效果示例代码
2023/05/07 HTML / CSS