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 相关文章推荐
javascript Keycode对照表
Oct 24 Javascript
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
Apr 15 Javascript
javascript陷阱 一不小心你就中招了(字符运算)
Nov 10 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
Dec 27 Javascript
js实现iframe框架取值的方法(兼容IE,firefox,chrome等)
Nov 26 Javascript
Angular2开发——组件规划篇
Mar 28 Javascript
微信小程序wx:for和wx:for-item的用法详解
Apr 01 Javascript
小试SVG之新手小白入门教程
Jan 08 Javascript
使用PreloadJS加载图片资源的基础方法详解
Feb 03 Javascript
JavaScript实现PC端横向轮播图
Feb 07 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
Oct 24 Javascript
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 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
删除无限级目录与文件代码共享
2006/07/12 PHP
PHP PDO fetch 模式各种参数的输出结果一览
2015/01/07 PHP
php在linux下检测mysql同步状态的方法
2015/01/15 PHP
thinkphp 字母函数详解T/I/N/D/M/A/R/U
2017/04/03 PHP
jquery 模拟类搜索框自动完成搜索提示功能(改进)
2010/05/24 Javascript
手机平板等移动端适配跳转URL的js代码
2014/01/25 Javascript
jquery队列函数用法实例
2014/12/16 Javascript
javascript 动态样式添加的简单实现
2016/10/11 Javascript
js实现炫酷的左右轮播图
2017/01/18 Javascript
jQuery 实现图片的依次加载图片功能
2017/07/06 jQuery
JavaScript取得gridview中获取checkbox选中的值
2017/07/24 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
2018/01/08 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
2018/05/04 Javascript
微信小程序在地图选择地址并返回经纬度简单示例
2018/12/03 Javascript
基于Vue的商品主图放大镜方案详解
2019/09/19 Javascript
Vue filter 过滤器、以及在table中的使用介绍
2020/09/07 Javascript
原生JS实现九宫格抽奖
2020/09/13 Javascript
python妹子图简单爬虫实例
2015/07/07 Python
从CentOS安装完成到生成词云python的实例
2017/12/01 Python
tensorflow 打印内存中的变量方法
2018/07/30 Python
浅析python中的迭代与迭代对象
2018/10/08 Python
Python要如何实现列表排序的几种方法
2020/02/21 Python
django 取消csrf限制的实例
2020/03/13 Python
PyCharm+Pipenv虚拟环境开发和依赖管理的教程详解
2020/04/16 Python
ffmpeg+Python实现B站MP4格式音频与视频的合并示例代码
2020/10/21 Python
HTML5 与 XHTML2
2008/10/17 HTML / CSS
美体小铺波兰官方网站:The Body Shop波兰
2019/09/03 全球购物
Myprotein荷兰官网:欧洲第一运动营养品牌
2020/07/11 全球购物
文件中有一组整数,要求排序后输出到另一个文件中
2012/01/04 面试题
对公司合理化的建议书
2014/03/12 职场文书
战友聚会主持词
2014/04/02 职场文书
《一个小村庄的故事》教学反思
2014/04/13 职场文书
机械工程学院大学生求职信
2014/05/25 职场文书
伦敦奥运会的口号
2014/06/21 职场文书
2014年银行员工工作总结
2014/11/12 职场文书
2014年医院个人工作总结
2014/12/09 职场文书