js取滚动条的尺寸的函数代码
更新时间：2011年11月30日 23:49:39 作者：
js取滚动条的尺寸的函数代码，需要的朋友可以参考下。
这个比较简单，做个记录而已。
创建一个嵌套节点，让外层节点产生滚动条，然后用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;
}
创建一个嵌套节点，让外层节点产生滚动条，然后用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具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-05-05
这篇文章主要介绍了js实现延迟加载的方法,涉及javascript中setTimeout与setInterval方法的使用技巧,需要的朋友可以参考下2015-06-06
正如标题所示的获取非最后一列td值并将title设为该值，下面使用jquery来简单实现下，需要的朋友可以参考下2013-10-10
在TypeScript中,类型断言用于告诉编译器某个变量的类型,这在我们确定变量的类型比编译器更准确时非常有用,本文给大家分享了几种TypeScript中使用类型断言方式,需要的朋友可以参考下2023-09-09
我经常在面试中问候：你能用 JavaScript 生成一个二维数组吗？这个问题看似简单,实际上却能揭示出面试者对 JavaScript 的熟练程度,天,就让我们一起来探索这个问题背后的答案,揭开生成二维数组的多种秘密,需要的朋友可以参考下2024-04-04
本文主要介绍了javascript history对象的相关知识。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
这篇文章主要介绍了js实现从数组里随机获取元素的方法，以及个人封装的js代码分享，十分的实用，这里推荐给小伙伴们2015-01-01
本篇文章主要介绍了webpack学习笔记之代码分割和按需加载的实例详解，具有一定的参考价值，有兴趣的可以了解一下2017-07-07
这篇文章主要为大家详细介绍了如何使用JavaScript实现一个简单的事件触发器,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-01-01
本篇文章主要介绍了详解weex默认webpack.config.js改造，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
最新评论