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 相关文章推荐
js 页面刷新location.reload和location.replace的区别小结
Dec 24 Javascript
javascript入门基础之私有变量
Feb 23 Javascript
jquery做的一个简单的屏幕锁定提示框
Mar 26 Javascript
浅谈被jQuery抛弃的函数及替代函数
May 03 Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
May 13 Javascript
JavaScript判断表单为空及获取焦点的方法
Feb 12 Javascript
JS使用单链表统计英语单词出现次数
Jun 16 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
Aug 25 Javascript
layui中layer前端组件实现图片显示功能的方法分析
Oct 13 Javascript
Jquery实现获取子元素的方法分析
Aug 24 jQuery
Vue 通过公共字段,拼接两个对象数组的实例
Nov 07 Javascript
在vue+element ui框架里实现lodash的debounce防抖
Nov 13 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删除数组中的特定元素的代码
2012/06/28 PHP
PHP中HTML标签过滤技巧
2014/01/07 PHP
php把数组值转换成键的方法
2015/07/13 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
thinkPHP3.2.2框架行为扩展及demo示例
2018/06/19 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
PHP扩展类型及安装方式解析
2020/04/27 PHP
S2SH整合JQuery+Ajax实现登录验证功能实现代码
2013/01/30 Javascript
js图片延迟加载的实现方法及思路
2013/07/22 Javascript
Flexigrid在IE下不显示数据的处理的解决方法
2013/10/24 Javascript
把字符串按照特定的字母顺序进行排序的js代码
2014/01/28 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
2015/09/10 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
2016/01/18 Javascript
Javascript对象字面量的理解
2016/06/22 Javascript
connection reset by peer问题总结及解决方案
2016/10/21 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
2016/11/25 Javascript
JavaScript实现星星等级评价功能
2017/03/22 Javascript
Vue表单控件绑定图文详解
2019/02/11 Javascript
浅谈bootstrap layer.open中end的使用方法
2019/09/12 Javascript
Vue vm.$attrs使用场景详解
2020/03/08 Javascript
[38:23]完美世界DOTA2联赛循环赛 FTD vs PXG BO2第二场 11.01
2020/11/02 DOTA
Python中scatter函数参数及用法详解
2017/11/08 Python
Python判断两个list是否是父子集关系的实例
2018/05/04 Python
DRF跨域后端解决之django-cors-headers的使用
2019/01/27 Python
Python的Tkinter点击按钮触发事件的例子
2019/07/19 Python
python 连续不等式语法糖实例
2020/04/15 Python
Python新手如何理解循环加载模块
2020/05/29 Python
IE滤镜与CSS3效果(详细整理分享)
2013/01/25 HTML / CSS
Moss Bros官网:英国排名第一的西装店
2020/02/26 全球购物
观看《永远的雷锋》心得体会
2014/03/12 职场文书
《金色的脚印》教后反思
2014/04/23 职场文书
一体化教学实施方案
2014/05/10 职场文书
元旦晚会主持词开场白
2015/05/28 职场文书
芙蓉镇观后感
2015/06/10 职场文书
2019年让高校“心动”的自荐信
2019/03/25 职场文书
教你怎么用Python监控愉客行车程
2021/04/29 Python