使用js實(shí)現(xiàn)一個(gè)簡單的滾動條過程解析
當(dāng)我們給元素加上 overflow: auto; 的時(shí)候,就會出現(xiàn)滾動條,然而瀏覽的不同,滾動條的樣式大不一樣,有些甚至非常丑。
于是就想著自己寫一個(gè)滾動條,大概需要弄清楚一下這幾個(gè)點(diǎn):
1、滾動條 bar 是根據(jù)內(nèi)容的多少,高度不一樣的,這個(gè)需要動態(tài)的計(jì)算
2、滾動條 bar 的 top 位置 和 內(nèi)容scrollTop 的關(guān)系。
思路:
使用嵌套的布局,如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } .wrap{ width: 400px; height: 400px; border: 2px solid deeppink; margin: 0 auto; overflow: hidden; position: relative; } .box-middle{ height: 100%; overflow: auto; width: 200%; } .box{ width: 50%; } .bar{ background: #000; width: 10px; position: absolute; top: 0; right: 0; } .s1{ height: 400px; background: pink; } .s2{ height: 400px; background: deeppink; } .s3{ height: 400px; background: deepskyblue; } </style> </head> <body> <div class="wrap" id="wrap"> <div class="box-middle" id="boxMidle"> <div class="box" id="content"> <div class="s1">內(nèi)容1</div> <div class="s2">內(nèi)容2</div> <div class="s3">內(nèi)容3</div> </div> </div> <div class="bar" id="bar"></div> </div> </body> </html>
wrap 為最外層,給overflow:hidden;。
box-middle 是中間層,也是有滾動條的一層,可以寬度給多一點(diǎn),這樣就看不見滾動條了。
box就是內(nèi)容層,通過js,計(jì)算使得 box 的寬度和wrap 保持一致,這樣就完全看不見滾動條了
bar 為滾動條
寫js之前,首先要弄懂一下三個(gè)屬性:
offsetHeight : height + padding + border clientHeight : height + padding scrollHeight : 內(nèi)容的高度(所有子元素高度和) + padding
1、計(jì)算比例:
bar的高度 / wrap的高度 = wrap的高度 / wrap 內(nèi)容部子元素的高度和 ; 此時(shí)忽略 wrap 的padding:0
bar的top / wrap的scrollTop = wrap的高度 / wrap 內(nèi)容部子元素的高度和 ;
需要注意,當(dāng)比例 的 值 小于 1 的時(shí)候,說明 這個(gè)時(shí)候沒有出現(xiàn)滾動條。
知道算法之后,寫代碼就簡單很多,普通版代碼如下:
var $wrap = document.getElementById("wrap"); var $boxMidle = document.getElementById("boxMidle"); var $content = document.getElementById("content"); var $bar = document.getElementById("bar"); $content.style.width = $wrap.clientWidth + "px"; //內(nèi)容的寬度 var rate = $boxMidle.clientHeight/ $boxMidle.scrollHeight; //滾動條高度的比例,也是滾動條top位置的比例 var barHeight = rate * $boxMidle.clientHeight; //滾動條的 bar 的高度 if(rate < 1){ //需要出現(xiàn)滾動條,并計(jì)算滾動條的高度 $bar.style.height = barHeight + "px"; }else{ //不需要出現(xiàn)滾動條 $bar.style.display = "none"; } $boxMidle.onscroll = function(e){ console.log("offsetHeight"+this.offsetHeight); //height + padding + border console.log("clientHeight"+this.clientHeight); // height + padding console.log("scrollHeight"+this.scrollHeight); //內(nèi)容的高度(所有子元素高度和) + padding console.log(this.scrollTop); $bar.style.top = this.scrollTop*rate + "px"; }
使用面向?qū)ο蟀妫?/p>
function ScrollBar(opt){ var me = this; me.$wrap = document.getElementById(opt.wrap); me.$boxMidle = document.getElementById(opt.boxMidle); me.$content = document.getElementById(opt.content); me.$bar = document.getElementById(opt.bar); me.init(); me.$boxMidle.onscroll = function(e){ //console.log("offsetHeight"+this.offsetHeight); //content + padding + border //console.log("clientHeight"+this.clientHeight); // content + padding //console.log("scrollHeight"+this.scrollHeight); //內(nèi)容的高度 + padding console.log(this.scrollTop); me.scrollToY(this.scrollTop * me.rate) } } ScrollBar.prototype.init = function(){ this.$content.style.width = this.$wrap.clientWidth + "px"; //內(nèi)容的寬度 this.rate = this.$boxMidle.clientHeight/this.$boxMidle.scrollHeight; //滾動條高度的比例,也是滾動條top位置的比例 this.barHeight = this.rate * this.$boxMidle.clientHeight; //滾動條的 bar 的高度 if(this.rate < 1){ //需要出現(xiàn)滾動條,并計(jì)算滾動條的高度 this.$bar.style.height = this.barHeight + "px"; }else{ //不需要出現(xiàn)滾動條 this.$bar.style.display = "none"; } } ScrollBar.prototype.scrollToY = function(y){ if(this.rate < 1){ this.$bar.style.top = y + 'px'; } } var obj = new ScrollBar({"wrap":"wrap","boxMidle":"boxMidle","content":"content","bar":"bar"});
最后看一下效果:
雖然效果很丑,但是可控,自己調(diào)一下就可以了
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JS多個(gè)矩形塊選擇效果代碼(模擬CS結(jié)構(gòu))
非常不錯的可以選擇多個(gè)矩形塊的功能代碼2008-11-11JavaScript實(shí)現(xiàn)簡單的計(jì)算器功能
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡單的計(jì)算器功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-03-03Actionscript與javascript交互實(shí)例程序(修改)
這篇文章主要介紹了Actionscript與javascript交互實(shí)例程序(修改)的相關(guān)資料,本文介紹的非常詳細(xì),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-09-09關(guān)于編寫性能高效的javascript事件的技術(shù)
這篇文章主要介紹了關(guān)于編寫性能高效的javascript事件的技術(shù) ,需要的朋友可以參考下2014-11-11JS正則表達(dá)式判斷有效數(shù)實(shí)例代碼
這篇文章主要介紹了JS正則表達(dá)式判斷有效數(shù)實(shí)例代碼,非常不錯,具有參考借鑒價(jià)值,需要的朋友可以參考下2017-03-03this,this,再次討論javascript中的this,超全面(經(jīng)典)
在JavaScript中,this 的概念比較復(fù)雜。除了在面向?qū)ο缶幊讨?,this 還是隨處可用的。這篇文章介紹了javascript中的this相關(guān)知識,對javascript this相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-01-01