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 相关文章推荐
utf8的编码算法 转载
Dec 27 Javascript
javascript不同页面传值的改进版
Sep 30 Javascript
JavaScript 拖拉缩放效果
Dec 10 Javascript
js onpropertychange输入框 事件获取属性
Mar 26 Javascript
javascript中日期转换成时间戳的小例子
Mar 21 Javascript
原生js ActiveXObject获取execl里面的值
Nov 01 Javascript
javascript框架设计之浏览器的嗅探和特征侦测
Jun 23 Javascript
详解javascript高级定时器
Dec 31 Javascript
JavaScript文本框脚本编写的注意事项
Jan 25 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
Jun 16 Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
Jan 03 Javascript
JS中图片压缩的方法小结
Nov 14 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的安全策略
2006/10/09 PHP
php print EOF实现方法
2009/05/21 PHP
PHP安全配置详细说明
2011/09/26 PHP
php stream_get_meta_data返回值
2013/09/29 PHP
PHP快速按行读取CSV大文件的封装类分享(也适用于其它超大文本文件)
2014/04/10 PHP
mysql查找删除重复数据并只保留一条实例详解
2016/09/24 PHP
PHP会话控制实例分析
2016/12/24 PHP
laravel中的fillable和guarded属性详解
2019/10/23 PHP
JavaScript 常见安全漏洞和自动化检测技术
2015/08/21 Javascript
jquery.cookie.js用法实例详解
2015/12/25 Javascript
js实现瀑布流的三种方式比较
2020/06/28 Javascript
简单谈谈javascript中this的隐式绑定
2016/02/22 Javascript
如何让一个json文件显示在表格里【实现代码】
2016/05/09 Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
2016/09/23 Javascript
浅析javascript中的Event事件
2016/12/09 Javascript
js自制图片放大镜功能
2017/01/24 Javascript
简单谈谈gulp-changed插件
2017/02/21 Javascript
详解vue父子组件间传值(props)
2017/06/29 Javascript
nodejs构建本地web测试服务器 如何解决访问静态资源问题
2017/07/14 NodeJs
ReactNative页面跳转Navigator实现的示例代码
2017/08/02 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
2020/01/21 Javascript
在Linux下使用Python的matplotlib绘制数据图的教程
2015/06/11 Python
Python3计算三角形的面积代码
2017/12/18 Python
解决tensorflow模型参数保存和加载的问题
2018/07/26 Python
使用PyCharm创建Django项目及基本配置详解
2018/10/24 Python
python自动化实现登录获取图片验证码功能
2019/11/20 Python
HTML5 Blob 实现文件下载功能的示例代码
2019/11/29 HTML / CSS
无畏的旅行:Intrepid Travel
2017/12/20 全球购物
Java提供了哪些企业应用编程接口
2015/02/13 面试题
项目合作计划书
2014/01/09 职场文书
宾馆总经理岗位职责
2014/02/14 职场文书
公司办公室岗位职责
2014/03/19 职场文书
敬老月活动总结
2014/08/28 职场文书
2015世界地球日活动总结
2015/02/09 职场文书
国家助学贷款承诺书
2015/04/30 职场文书
html+css实现环绕倒影加载特效
2021/07/07 HTML / CSS