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 相关文章推荐
showModalDialog 和 showModelessDialog
Jan 22 Javascript
一个js实现的所谓的滑动门
May 23 Javascript
jquery js 获取时间差、时间格式具体代码
Jun 05 Javascript
JS图片切换的具体方法(带缩略图版)
Nov 12 Javascript
使用javascript为网页增加夜间模式
Jan 26 Javascript
改变状态栏文字的js代码
Jun 13 Javascript
AngularJs中route的使用方法和配置
Feb 04 Javascript
node.js入门学习之url模块
Feb 25 Javascript
vue实现点击图片放大效果
Aug 15 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
Sep 26 Javascript
浅谈Vue.js中ref ($refs)用法举例总结
Dec 19 Javascript
webpack v4 从dev到prd的方法
Apr 02 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实现在限定区域里自动调整字体大小的类实例
2015/04/02 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
laravel 获取某个查询的查询SQL语句方法
2019/10/12 PHP
求解开jscript.encode代码的asp函数
2007/02/28 Javascript
基于jquery的一个图片hover的插件
2010/04/24 Javascript
六款帮助你实现惊艳视差滚动效果的jQuery插件
2012/09/14 Javascript
SuperSlide2实现图片滚动特效
2014/06/20 Javascript
JQuery中$(document)是什么意思有什么作用
2014/07/21 Javascript
用Jquery.load载入页面后样式没了页面混乱的解决方法
2014/10/20 Javascript
Javascript中的Prototype到底是什么
2016/02/16 Javascript
详解js的事件处理函数和动态创建html标记方法
2016/12/16 Javascript
基于bootstrap的文件上传控件bootstrap fileinput
2016/12/23 Javascript
JS获得多个同name 的input输入框的值的实现方法
2017/01/09 Javascript
ES6数组的扩展详解
2017/04/25 Javascript
AngularJS路由删除#符号解决的办法
2017/09/28 Javascript
JavaScript基于数组实现的栈与队列操作示例
2018/12/22 Javascript
javascript实现京东登录显示隐藏密码
2020/08/02 Javascript
微信小程序实现点击导航条切换页面
2020/11/19 Javascript
[28:48]《真视界》- 2017年国际邀请赛
2017/09/27 DOTA
[02:44]重置世界,颠覆未来——DOTA2 7.23版本震撼上线
2019/12/01 DOTA
推荐11个实用Python库
2015/01/23 Python
python中pandas.DataFrame的简单操作方法(创建、索引、增添与删除)
2017/03/12 Python
Python之文字转图片方法
2018/05/10 Python
解决python3 json数据包含中文的读写问题
2018/05/10 Python
Python线程之定位与销毁的实现
2019/02/17 Python
python,Django实现的淘宝客登录功能示例
2019/06/12 Python
CentOS 7如何实现定时执行python脚本
2020/06/24 Python
关于Python不换行输出和不换行输出end=““不显示的问题(亲测已解决)
2020/10/27 Python
Python实现京东抢秒杀功能
2021/01/25 Python
String、StringBuffer、StringBuilder有区别
2015/09/18 面试题
2013年军训通讯稿
2014/02/05 职场文书
秸秆管理实施方案
2014/03/15 职场文书
2014年公路养护工作总结
2014/12/04 职场文书
践行三严三实心得体会(2016推荐篇)
2016/01/06 职场文书
手把手教你怎么用Python实现zip文件密码的破解
2021/05/27 Python
python实现A*寻路算法
2021/06/13 Python