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 相关文章推荐
在父页面得到zTree已选中的节点的方法
Feb 12 Javascript
javascript实现连续赋值
Aug 10 Javascript
js电话号码验证方法
Sep 28 Javascript
JavaScript中的ParseInt("08")和“09”返回0的原因分析及解决办法
May 19 Javascript
JQuery PHP图片在线裁剪实例
Jul 27 Javascript
走进AngularJs之过滤器(filter)详解
Feb 17 Javascript
jquery中$.fn和图片滚动效果实现的必备知识总结
Apr 21 jQuery
JS 实现缓存算法的示例(FIFO/LRU)
Mar 20 Javascript
实例分析编写vue组件方法
Feb 12 Javascript
详解在Angular4中使用ng2-baidu-map的方法
Jun 19 Javascript
jquery图片预览插件实现方法详解
Jul 18 jQuery
js对象数组和对象的使用实例详解
Aug 27 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
JavaScript 异步调用框架 (Part 1 - 问题 & 场景)
2009/08/03 Javascript
JavaScript高级程序设计 阅读笔记(七) ECMAScript中的语句
2012/02/27 Javascript
一个基于jquery的文本框记数器
2012/09/19 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
springMVC结合AjaxForm上传文件
2016/07/12 Javascript
浅谈jQuery中Ajax事件beforesend及各参数含义
2016/12/03 Javascript
JS实现简易刻度时钟示例代码
2017/03/11 Javascript
基于AngularJS的简单使用详解
2017/09/10 Javascript
JavaScript中Object基础内部方法图
2018/02/05 Javascript
解决betterScroll在vue中存在图片时,出现拉不动的问题
2018/09/27 Javascript
vue组件定义,全局、局部组件,配合模板及动态组件功能示例
2019/03/19 Javascript
20道JS原理题助你面试一臂之力(必看)
2019/07/22 Javascript
小结Python用fork来创建子进程注意事项
2014/07/03 Python
初步介绍Python中的pydoc模块和distutils模块
2015/04/13 Python
python字符串编码识别模块chardet简单应用
2015/06/15 Python
Windows环境下python环境安装使用图文教程
2018/03/13 Python
浅谈Python里面小数点精度的控制
2018/07/16 Python
Python双向循环链表实现方法分析
2018/07/30 Python
Python json模块dumps、loads操作示例
2018/09/06 Python
Python3 合并二叉树的实现
2019/09/30 Python
python模拟实现分发扑克牌
2020/04/22 Python
深入了解Python装饰器的高级用法
2020/08/13 Python
python 密码学示例——凯撒密码的实现
2020/09/21 Python
突袭HTML5之Javascript API扩展2—地理信息服务及地理位置API学习
2013/01/31 HTML / CSS
局域网定义和特性
2016/01/23 面试题
专科毕业生就业推荐信
2013/11/01 职场文书
硕士研究生自我鉴定范文
2013/12/27 职场文书
检举信的格式及范文
2014/04/04 职场文书
环保公益策划方案
2014/08/15 职场文书
上党课的心得体会
2014/09/02 职场文书
会计试用期自我评价
2014/09/19 职场文书
金榜题名主持词
2015/07/02 职场文书
提升Nginx性能的一些建议
2021/03/31 Servers
MySQL主从复制断开的常用修复方法
2021/04/07 MySQL
人物搭配车车超萌联名预备中 【咒术迴战】 ⨯ 【天竺鼠车车】 展开合作
2022/04/11 日漫
Linux在两个服务器直接传文件的操作方法
2022/08/05 Servers