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 相关文章推荐
prototype class详解
Sep 07 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
Jan 27 Javascript
关于jQuery参考实例 1.0 jQuery的哲学
Apr 07 Javascript
简单实用的反馈表单无刷新提交带验证
Nov 15 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
Mar 31 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
Aug 21 Javascript
浅析JavaScript访问对象属性和方法及区别
Nov 16 Javascript
js创建jsonArray传输至后台及后台全面解析
Apr 11 Javascript
41个Web开发者必须收藏的JavaScript实用技巧
Jul 22 Javascript
使用JS中的exec()方法构造正则表达式验证
Aug 01 Javascript
Node.js 实现简单的接口服务器的实例代码
May 23 Javascript
深入了解Vue.js 混入(mixins)
Jul 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结合JQueryJcrop实现图片裁切实例详解
2014/07/24 PHP
php上传大文件失败的原因及应对策略
2015/10/20 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
javascript 特殊字符串
2009/02/25 Javascript
JavaScript类库D
2010/10/24 Javascript
js toFixed()方法的重写实现精度的统一
2014/03/06 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
2015/05/01 Javascript
解析JavaScript的ES6版本中的解构赋值
2015/07/28 Javascript
jQuery Ajax使用FormData对象上传文件的方法
2016/09/07 Javascript
微信小程序前端源码逻辑和工作流
2016/09/25 Javascript
探讨AngularJs中ui.route的简单应用
2016/11/16 Javascript
Bootstrap实现的标签页内容切换显示效果示例
2017/05/25 Javascript
详解Vue学习笔记进阶篇之列表过渡及其他
2017/07/17 Javascript
vue axios请求超时的正确处理方法
2018/04/02 Javascript
vue init webpack 建vue项目报错的解决方法
2018/09/29 Javascript
JavaScript函数定义方法实例详解
2019/03/05 Javascript
Vue开发Html5微信公众号的步骤
2019/04/11 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
2019/04/25 Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
2019/11/09 Javascript
Vue双向绑定实现原理与方法详解
2020/05/07 Javascript
python实现简单五子棋游戏
2019/06/18 Python
python字符串Intern机制详解
2019/07/01 Python
Python中三维坐标空间绘制的实现
2020/09/22 Python
python录音并调用百度语音识别接口的示例
2020/12/01 Python
CSS3模拟IOS滑动开关效果
2016/09/28 HTML / CSS
100%有机精油,美容油:House of Pure Essence
2018/10/30 全球购物
Allen Edmonds官方网站:一家美国优质男士鞋类及配饰制造商
2019/03/12 全球购物
六十岁生日答谢词
2014/01/10 职场文书
将相和教学反思
2014/02/04 职场文书
2014年十八届四中全会思想汇报范文
2014/10/17 职场文书
2014初中数学教研组工作总结
2014/12/19 职场文书
2015自愿离婚协议书范本
2015/01/28 职场文书
毕业生自荐信范文
2015/03/05 职场文书
2015年党总支工作总结
2015/05/25 职场文书
杨善洲观后感
2015/06/04 职场文书
Golang bufio详细讲解
2022/04/21 Golang