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重要知识更新
Jul 08 Javascript
理解JavaScript的prototype属性
Feb 11 Javascript
js动态为代码着色显示行号
May 29 Javascript
Javascript中查找不以XX字符结尾的单词示例代码
Oct 15 Javascript
js为空或不是对象问题的快速解决方法
Dec 11 Javascript
调用DOM对象的focus使文本框获得焦点
Feb 19 Javascript
开发中可能会用到的jQuery小技巧
Mar 07 Javascript
JavaScript function函数种类详解
Feb 22 Javascript
vue.js入门教程之基础语法小结
Sep 01 Javascript
Vue.js 中的 $watch使用方法
May 25 Javascript
vue同个按钮控制展开和折叠同个事件操作
Jul 29 Javascript
小程序点餐界面添加购物车左右摆动动画
Sep 23 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 Smarty模板生成html文档的方法
2010/04/12 PHP
PHP抓屏函数实现屏幕快照代码分享
2014/01/02 PHP
PHP Smarty模版简单使用方法
2016/03/30 PHP
CI框架出现mysql数据库连接资源无法释放的解决方法
2016/05/17 PHP
php中上传文件的的解决方案
2018/09/25 PHP
php服务器的系统详解
2019/10/12 PHP
jquery创建div 实现代码
2009/04/27 Javascript
js克隆对象、数组的常用方法介绍
2013/09/26 Javascript
js、css、img等浏览器缓存问题的2种解决方案
2013/10/23 Javascript
js为空或不是对象问题的快速解决方法
2013/12/11 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
2016/07/06 Javascript
详解Vue使用 vue-cli 搭建项目
2017/04/20 Javascript
在react中使用vuex的示例代码
2018/07/30 Javascript
createObjectURL方法实现本地图片预览
2019/09/30 Javascript
javascript实现贪吃蛇游戏(娱乐版)
2020/08/17 Javascript
JavaScript事件委托实现原理及优点进行
2020/08/29 Javascript
JavaScript 判断数据类型的4种方法
2020/09/11 Javascript
Python常用内置函数总结
2015/02/08 Python
python中import reload __import__的区别详解
2017/10/16 Python
Python实现加载及解析properties配置文件的方法
2018/03/29 Python
在python中将字符串转为json对象并取值的方法
2018/12/31 Python
Python实现的大数据分析操作系统日志功能示例
2019/02/11 Python
使用python绘制二元函数图像的实例
2019/02/12 Python
python内存动态分配过程详解
2019/07/15 Python
keras tensorflow 实现在python下多进程运行
2020/02/06 Python
手把手教你用纯css3实现轮播图效果实例
2017/05/04 HTML / CSS
canvas进阶之如何画出平滑的曲线
2018/10/15 HTML / CSS
Html5踩坑记之mandMobile使用小记
2020/04/02 HTML / CSS
寻找完美的房车租赁:RVShare
2019/02/23 全球购物
工作时间上网检讨书
2014/02/03 职场文书
个人对照检查材料
2014/02/12 职场文书
诉讼授权委托书
2014/10/15 职场文书
公证书格式
2015/01/23 职场文书
运动会报道稿大全
2015/07/23 职场文书
学习经验交流会策划书
2015/11/02 职场文书
2016年党员创先争优公开承诺书
2016/03/25 职场文书