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 相关文章推荐
jQuery分别获取选中的复选框值的示例
Jun 17 Javascript
javascript 原型链维护和继承详解
Nov 26 Javascript
ExpressJS入门实例
Jan 14 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
May 10 Javascript
js实现精确到秒的倒计时效果
May 29 Javascript
JavaScript实现三级联动菜单实例代码
Jun 26 Javascript
jQuery实现checkbox全选功能完整实例
Jul 12 jQuery
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
May 09 Javascript
小程序实现搜索框
Jun 19 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
Feb 27 Javascript
javascript实现打砖块小游戏(附完整源码)
Sep 18 Javascript
微信小程序用户授权最佳实践指南
May 08 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页面间传递参数实例代码
2008/06/05 PHP
php实现PDO中捕获SQL语句错误的方法
2017/02/16 PHP
javascript 控制input只允许输入的各种指定内容
2014/06/19 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
2014/06/20 Javascript
JavaScript处理解析JSON数据过程详解
2015/09/11 Javascript
javascript中获取class的简单实现
2016/07/12 Javascript
JavaScript中的splice方法用法详解
2016/07/20 Javascript
jquery之别踩白块游戏的简单实现
2016/07/25 Javascript
关于List.ToArray()方法的效率测试
2016/09/30 Javascript
基于jQuery实现图片推拉门动画效果的两种方法
2017/08/26 jQuery
详解项目升级到vue-cli3的正确姿势
2019/01/28 Javascript
Python list操作用法总结
2015/11/10 Python
python函数中return后的语句一定不会执行吗?
2017/07/06 Python
python实现冒泡排序算法的两种方法
2018/03/10 Python
python读取文件名并改名字的实例
2019/01/07 Python
Python3实现的简单三级菜单功能示例
2019/03/12 Python
Python2与Python3的区别实例分析
2019/04/11 Python
pytorch 模型可视化的例子
2019/08/17 Python
Flask项目中实现短信验证码和邮箱验证码功能
2019/12/05 Python
python数据预处理方式 :数据降维
2020/02/24 Python
自定义实现 PyQt5 下拉复选框 ComboCheckBox的完整代码
2020/03/30 Python
python filecmp.dircmp实现递归比对两个目录的方法
2020/05/22 Python
使用html5新特性轻松监听任何App自带返回键的示例
2018/03/13 HTML / CSS
澳大利亚相机之家:Camera House
2017/11/30 全球购物
Calzedonia美国官网:意大利风格袜子、打底裤和沙滩装
2018/07/19 全球购物
Lulu Guinness露露·吉尼斯官网:红唇包
2019/02/03 全球购物
Sisley法国希思黎中国官网:享誉全球的奢华植物美容品牌
2019/06/30 全球购物
生物化工专业个人自荐信
2013/09/26 职场文书
运动会稿件300字
2014/02/14 职场文书
增员口号大全
2014/06/18 职场文书
幼儿园保育员责任书
2014/07/22 职场文书
志愿者爱心公益活动策划方案
2014/09/15 职场文书
2014年创卫工作总结
2014/11/24 职场文书
红色革命电影观后感
2015/06/18 职场文书
python3 hdf5文件 遍历代码
2021/05/19 Python
JS中如何优雅的使用async await详解
2021/10/05 Javascript