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 相关文章推荐
html文件中jquery与velocity变量中的$冲突的解决方法
Nov 01 Javascript
2则自己编写的jQuery特效分享
Feb 26 Javascript
js改变embed标签src值的方法
Apr 10 Javascript
JS和css实现检测移动设备方向的变化并判断横竖屏幕
May 25 Javascript
JS特效实现图片自动播放并可控的效果
Jul 31 Javascript
javascript简单比较日期大小的方法
Jan 05 Javascript
JavaScript数组的一些奇葩行为
Jan 25 Javascript
js实现百度地图定位于地址逆解析,显示自己当前的地理位置
Dec 08 Javascript
前端开发必知的15个jQuery小技巧
Jan 22 Javascript
浅谈Angular路由复用策略
Oct 04 Javascript
vue页面切换过渡transition效果
Oct 08 Javascript
Vue2.x通用编辑组件的封装及应用详解
May 28 Javascript
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脚本的10个技巧(3)
2006/10/09 PHP
php中获得视频时间总长度的另一种方法
2011/09/15 PHP
PHP变量的定义、可变变量、变量引用、销毁方法
2013/12/20 PHP
针对多用户实现头像上传功能PHP代码 适用于登陆页面制作
2016/08/17 PHP
豆瓣网的jquery代码实例
2008/06/15 Javascript
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
2013/11/22 Javascript
Angular2 环境配置详细介绍
2016/09/21 Javascript
Bootstrap列表组学习使用
2017/02/09 Javascript
微信小程序 后台登录(非微信账号)实例详解
2017/03/31 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
2017/04/13 Javascript
Vue 中批量下载文件并打包的示例代码
2017/11/20 Javascript
vue两组件间值传递 $router.push实现方法
2019/05/15 Javascript
JS实现数组删除指定元素功能示例
2019/06/05 Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
2019/06/11 Javascript
vue语法自动转typescript(解放双手)
2019/09/18 Javascript
js判断一个对象是数组(函数)的方法实例
2019/12/19 Javascript
js实现登录时记住密码的方法分析
2020/04/05 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
2020/07/22 Javascript
python文件读写操作与linux shell变量命令交互执行的方法
2015/01/14 Python
Python工程师面试题 与Python Web相关
2016/01/14 Python
Python中标准模块importlib详解
2017/04/16 Python
Python有序查找算法之二分法实例分析
2017/12/11 Python
Python判断一个文件夹内哪些文件是图片的实例
2018/12/07 Python
利用Django提供的ModelForm增删改数据的方法
2019/01/06 Python
Python中typing模块与类型注解的使用方法
2019/08/05 Python
Python3使用腾讯云文字识别(腾讯OCR)提取图片中的文字内容实例详解
2020/02/18 Python
python 如何调用 dubbo 接口
2020/09/24 Python
python3中编码获取网页的实例方法
2020/11/16 Python
Sneaker Studio乌克兰:购买运动鞋
2018/03/26 全球购物
固特异美国在线轮胎店:Goodyear Tire
2019/02/23 全球购物
应届生法律求职信
2013/10/22 职场文书
本科毕业生求职自荐信
2014/02/03 职场文书
安全教育感言
2014/03/04 职场文书
工程项目经理岗位职责
2015/02/02 职场文书
大一学生个人总结
2015/02/15 职场文书
工作违纪的检讨书范文
2019/07/09 职场文书