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 相关文章推荐
juqery 学习之五 文档处理 包裹、替换、删除、复制
Feb 11 Javascript
THREE.JS入门教程(2)着色器-上
Jan 24 Javascript
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
Feb 05 Javascript
jquery click([data],fn)使用方法实例介绍
Jul 08 Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
Sep 02 Javascript
jQuery Validate表单验证入门学习
Dec 18 Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
Jul 27 Javascript
js实现单张图片平移切换效果
Oct 11 Javascript
在Vant的基础上实现添加表单验证框架的方法示例
Dec 05 Javascript
js实现提交前对列表数据的增删改查
Jan 16 Javascript
node.JS事件机制与events事件模块的使用方法详解
Feb 06 Javascript
vue + el-form 实现的多层循环表单验证
Nov 25 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
使用ThinkPHP自带的Http类下载远程图片到本地的实现代码
2011/08/02 PHP
ThinkPHP表单自动提交验证实例教程
2014/07/18 PHP
ThinkPHP中的常用查询语言汇总
2014/08/22 PHP
PHP使用new StdClass()创建空对象的方法分析
2017/06/06 PHP
PHP中危险的file_put_contents函数详解
2017/11/04 PHP
基于jquery的web页面日期格式化插件
2011/11/15 Javascript
动态的绑定事件addEventListener方法的使用
2014/01/24 Javascript
Jquery动态添加输入框的方法
2015/05/29 Javascript
JS实现适合于后台使用的动画折叠菜单效果
2015/09/21 Javascript
jquery的ajax提交form表单的两种方法小结(推荐)
2016/05/25 Javascript
jQuery插件扩展extend的简单实现原理
2016/06/24 Javascript
JS公共小方法之判断对象是否为domElement的实例
2016/11/25 Javascript
NodeJs的fs读写删除移动监听
2017/04/28 NodeJs
JavaScript 通过Ajax 动态加载CheckBox复选框
2017/08/31 Javascript
jquery实现动态添加附件功能
2018/10/23 jQuery
vue webpack重写cookie路径的方法
2019/07/10 Javascript
微信小程序自定义导航栏(模板化)
2019/11/15 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
2020/01/21 Javascript
Vue3为什么这么快
2020/09/23 Javascript
深入理解Python中字典的键的使用
2015/08/19 Python
使用Python的Twisted框架编写非阻塞程序的代码示例
2016/05/25 Python
python实现list元素按关键字相加减的方法示例
2017/06/09 Python
Python利用multiprocessing实现最简单的分布式作业调度系统实例
2017/11/14 Python
Django 框架模型操作入门教程
2019/11/05 Python
Keras 使用 Lambda层详解
2020/06/10 Python
Python正则表达式高级使用方法汇总
2020/06/18 Python
英国蜡烛、蜡烛配件和家居香氛购买网站:Yankee Candle
2018/12/12 全球购物
计算机应用专业毕业生求职信
2013/10/24 职场文书
大学生就业自荐信
2013/10/26 职场文书
综艺节目策划方案
2014/06/13 职场文书
“向国旗敬礼”活动策划方案(4篇)
2014/09/27 职场文书
埃及王子观后感
2015/06/16 职场文书
公司仓库管理制度
2015/08/04 职场文书
安全教育主题班会总结
2015/08/14 职场文书
学雷锋广播稿大全
2015/08/19 职场文书
2016年“11.11”光棍节活动总结
2016/04/05 职场文书