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与jquery中跳出循环的区别总结
Nov 04 Javascript
javascript屏蔽右键代码
May 15 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
Jun 23 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
Sep 09 Javascript
bootstrap组件之按钮式下拉菜单小结
Jan 19 Javascript
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 jQuery
详解从零搭建 vue2 vue-router2 webpack3 工程
Nov 22 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
May 01 Javascript
Electron-vue开发的客户端支付收款工具的实现
May 24 Javascript
vue实现行列转换的一种方法
Aug 06 Javascript
vue el-table实现自定义表头
Dec 11 Javascript
JavaScript原始值与包装对象的详细介绍
May 11 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实现域名whois查询的代码(数据源万网、新网)
2010/02/22 PHP
php设计模式 Template (模板模式)
2011/06/26 PHP
php set_time_limit()函数的使用详解
2013/06/05 PHP
JavaScript 中的replace方法说明
2007/04/13 Javascript
JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
2010/05/25 Javascript
javascript中字符串拼接需注意的问题
2010/07/13 Javascript
jQuery easyui datagrid动态查询数据实例讲解
2013/02/26 Javascript
javascript获取设置div的高度和宽度兼容任何浏览器
2013/09/22 Javascript
Jquery 动态生成表格示例代码
2013/12/24 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
2014/11/16 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
2015/12/01 Javascript
轻松实现jquery手风琴效果
2016/01/14 Javascript
JavaScript职责链模式概述
2016/09/17 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
2016/10/14 Javascript
文件上传,iframe跨域数据提交的实现
2016/11/18 Javascript
jQuery删除当前节点元素
2016/12/07 Javascript
js选项卡的制作方法
2017/01/23 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
2018/02/28 Javascript
如何在vue里添加好看的lottie动画
2018/08/02 Javascript
在Linux系统上部署Apache+Python+Django+MySQL环境
2015/12/24 Python
详解Python设计模式编程中观察者模式与策略模式的运用
2016/03/02 Python
解决Python 爬虫URL中存在中文或特殊符号无法请求的问题
2018/05/11 Python
mac安装scrapy并创建项目的实例讲解
2018/06/13 Python
django配置连接数据库及原生sql语句的使用方法
2019/03/03 Python
Python绘制频率分布直方图的示例
2019/07/08 Python
解决Atom安装Hydrogen无法运行python3的问题
2019/08/28 Python
python使用梯度下降算法实现一个多线性回归
2020/03/24 Python
django实现模型字段动态choice的操作
2020/04/01 Python
opencv之颜色过滤只留下图片中的红色区域操作
2020/06/05 Python
匈牙利超级网上商店和优惠:Alza.hu
2019/12/17 全球购物
保安岗位职责
2014/02/21 职场文书
大学新闻系自荐书
2014/05/31 职场文书
陈安之励志演讲稿
2014/08/21 职场文书
我爱幼儿园演讲稿
2014/09/11 职场文书
2015年医德考评自我评价
2015/03/03 职场文书
python套接字socket通信
2022/04/01 Python