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 相关文章推荐
让iframe框架网页在任何浏览器下自动伸缩
Aug 18 Javascript
数组Array进行原型prototype扩展后带来的for in遍历问题
Feb 07 Javascript
javascript 仿QQ滑动菜单效果代码
Sep 03 Javascript
使用 JScript 创建 .exe 或 .dll 文件的方法
Jul 13 Javascript
js性能优化 如何更快速加载你的JavaScript页面
Mar 17 Javascript
Jquery删除css属性的简单方法
Dec 04 Javascript
JS 实现计算器详解及实例代码(一)
Jan 08 Javascript
微信小程序 开发之快递查询功能的实现
Jan 09 Javascript
webpack 1.x升级过程中的踩坑总结大全
Aug 09 Javascript
vue微信分享 vue实现当前页面分享其他页面
Dec 02 Javascript
Vue中的无限加载vue-infinite-loading的方法
Apr 08 Javascript
jenkins自动构建发布vue项目的方法步骤
Jan 04 Vue.js
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
安装APACHE
2007/01/15 PHP
php中的观察者模式
2010/03/24 PHP
PHP zip扩展Linux下安装过程分享
2014/05/05 PHP
thinkPHP商城公告功能开发问题分析
2016/12/01 PHP
用javascript实现读取txt文档的脚本
2007/07/20 Javascript
让浏览器DOM元素最后加载的js方法
2014/07/29 Javascript
JS跨域解决方案之使用CORS实现跨域
2016/04/14 Javascript
详解node Async/Await 更好的异步编程解决方案
2018/05/10 Javascript
详解extract-text-webpack-plugin 的使用及安装
2018/06/12 Javascript
axios的拦截请求与响应方法
2018/08/11 Javascript
浅谈Node 异步IO和事件循环
2019/05/05 Javascript
Node.js实现简单的爬取的示例代码
2019/06/25 Javascript
微信小程序实现左滑动删除效果
2020/03/30 Javascript
vue 中固定导航栏的实例代码
2019/11/01 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
2020/01/22 Javascript
jquery实现拖拽添加元素功能
2020/12/01 jQuery
jquery实现穿梭框功能
2021/01/19 jQuery
NodeJS和浏览器中this关键字的不同之处
2021/03/03 NodeJs
python生成器的使用方法
2013/11/21 Python
Python在不同目录下导入模块的实现方法
2017/10/27 Python
Django Rest framework之认证的实现代码
2018/12/17 Python
python使用PIL模块获取图片像素点的方法
2019/01/08 Python
python实现nao机器人身体躯干和腿部动作操作
2019/04/29 Python
python——全排列数的生成方式
2020/02/26 Python
Python中常见的数制转换有哪些
2020/05/27 Python
基于python实现音乐播放器代码实例
2020/07/01 Python
Python爬虫爬取糗事百科段子实例分享
2020/07/31 Python
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
2012/12/13 HTML / CSS
意大利咖啡、浓缩咖啡和浓缩咖啡机:illy caffe
2019/03/20 全球购物
世界各地的旅游、观光和活动:Isango!
2019/10/29 全球购物
化工机械应届生求职信
2013/11/04 职场文书
物流专业大学生职业生涯规划书范文
2014/01/15 职场文书
大学生活动总结怎么写
2014/04/29 职场文书
开工仪式策划方案
2014/05/23 职场文书
2014年绩效考核工作总结
2014/12/11 职场文书
施工单位工程部经理岗位职责
2015/04/09 职场文书