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 相关文章推荐
IE7提供XMLHttpRequest对象为兼容
Mar 08 Javascript
jQuery创建插件的代码分析
Apr 14 Javascript
jQuery选择器全面总结
Jan 06 Javascript
一个JavaScript递归实现反转数组字符串的实例
Oct 14 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
Mar 08 Javascript
JavaScript奇技淫巧44招【实用】
Dec 11 Javascript
JavaScript使用Ajax上传文件的示例代码
Aug 10 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
Angular实现双向折叠列表组件的示例代码
Nov 21 Javascript
vue中使用极验验证码的方法(附demo)
Dec 04 Javascript
H5实现手机拍照和选择上传功能
Dec 18 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
Aug 05 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 获取MSN好友列表的代码(2009-05-14测试通过)
2009/09/09 PHP
php 解决旧系统 查出所有数据分页的类
2012/08/27 PHP
PHP数组无限分级数据的层级化处理代码
2012/12/29 PHP
用php随机生成福彩双色球号码的2种方法
2013/02/04 PHP
php的mail函数发送UTF-8编码中文邮件时标题乱码的解决办法
2015/10/20 PHP
PHP将身份证正反面两张照片合成一张图片的代码
2017/04/08 PHP
Django 标签筛选的实现代码(一对多、多对多)
2018/09/05 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
简单三步,搞掂内存泄漏
2007/03/10 Javascript
js中if语句的几种优化代码写法
2011/03/12 Javascript
Javascript中的window.event.keyCode使用介绍
2011/04/26 Javascript
用jQuery实现一些导航条切换,显示隐藏的实例代码
2013/06/08 Javascript
javascript 闭包详解
2015/02/15 Javascript
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
2015/11/24 Javascript
JavaScript获取当前运行脚本文件所在目录的方法
2016/02/03 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
2016/08/11 Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
2017/02/10 Javascript
关于Bootstrap按钮组件消除黄框的方法
2017/05/19 Javascript
vue 1.x 交互实现仿百度下拉列表示例
2017/10/21 Javascript
Node.js中sequelize时区的配置方法
2017/12/10 Javascript
vue渲染时闪烁{{}}的问题及解决方法
2018/03/28 Javascript
使用jquery-easyui的布局layout写后台管理页面的代码详解
2019/06/19 jQuery
python处理大数字的方法
2015/05/27 Python
深入浅析python 中的匿名函数
2018/05/21 Python
pycharm设置鼠标悬停查看方法设置
2019/07/29 Python
python圣诞树编写实例详解
2020/02/13 Python
html5 input输入实时检测以及延时优化
2018/07/18 HTML / CSS
英国床垫在线:Mattress Online
2016/12/07 全球购物
布鲁明戴尔百货店:Bloomingdale’s
2016/12/21 全球购物
StudentUniverse英国:学生航班、酒店和旅游
2019/08/25 全球购物
本科毕业生自我鉴定
2013/11/02 职场文书
挂职自我鉴定
2014/02/26 职场文书
节能标语大全
2014/06/21 职场文书
考试没考好检讨书
2015/05/06 职场文书
小学教育见习总结
2015/06/23 职场文书
安全生产协议书
2016/03/22 职场文书