js取滾動條的尺寸的函數(shù)代碼
更新時間：2011年11月30日 23:49:39 作者：
js取滾動條的尺寸的函數(shù)代碼，需要的朋友可以參考下。
這個比較簡單，做個記錄而已。
創(chuàng)建一個嵌套節(jié)點，讓外層節(jié)點產(chǎn)生滾動條，然后用offsetWidth - clientWidth即可獲得滾動條寬度。需要注意的是為了避免頁面抖動，可以設(shè)置外層元素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;
}
創(chuàng)建一個嵌套節(jié)點，讓外層節(jié)點產(chǎn)生滾動條，然后用offsetWidth - clientWidth即可獲得滾動條寬度。需要注意的是為了避免頁面抖動，可以設(shè)置外層元素position:absolute和visibility:hidden
參考：
復(fù)制代碼 代碼如下:
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;
}
相關(guān)文章
JavaScript中工廠函數(shù)與構(gòu)造函數(shù)示例詳解
這篇文章主要給大家介紹了關(guān)于JavaScript中工廠函數(shù)與構(gòu)造函數(shù)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了js實現(xiàn)延遲加載的方法,涉及javascript中setTimeout與setInterval方法的使用技巧,需要的朋友可以參考下2015-06-06
正如標(biāo)題所示的獲取非最后一列td值并將title設(shè)為該值，下面使用jquery來簡單實現(xiàn)下，需要的朋友可以參考下2013-10-10
在TypeScript中,類型斷言用于告訴編譯器某個變量的類型,這在我們確定變量的類型比編譯器更準(zhǔn)確時非常有用,本文給大家分享了幾種TypeScript中使用類型斷言方式,需要的朋友可以參考下2023-09-09
JavaScript生成二維數(shù)組的多種方法小結(jié)
我經(jīng)常在面試中問候：你能用?JavaScript?生成一個二維數(shù)組嗎？這個問題看似簡單,實際上卻能揭示出面試者對?JavaScript?的熟練程度,天,就讓我們一起來探索這個問題背后的答案,揭開生成二維數(shù)組的多種秘密,需要的朋友可以參考下2024-04-04
本文主要介紹了javascript history對象的相關(guān)知識。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要介紹了js實現(xiàn)從數(shù)組里隨機(jī)獲取元素的方法，以及個人封裝的js代碼分享，十分的實用，這里推薦給小伙伴們2015-01-01
webpack學(xué)習(xí)筆記之代碼分割和按需加載的實例詳解
本篇文章主要介紹了webpack學(xué)習(xí)筆記之代碼分割和按需加載的實例詳解，具有一定的參考價值，有興趣的可以了解一下2017-07-07
基于JavaScript實現(xiàn)一個簡單的事件觸發(fā)器
這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript實現(xiàn)一個簡單的事件觸發(fā)器,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
詳解weex默認(rèn)webpack.config.js改造
本篇文章主要介紹了詳解weex默認(rèn)webpack.config.js改造，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01