【JavaScript】假的scroll-bar

步驟

  1. 隱藏原生的scroll-bar
  2. 用CSS做出一個假的bar
  3. 算出scroll-bar的長度
  4. 當發生滑動時,改變bar的top

隱藏原生的scroll-bar

  • 外層定義一個box,裡面要有假的bar與內容wrapper
  • 外層box設overflow: hidden
  • 內層wrapper設padding-left,這樣真正的scroll-bar就會超出外層box而被卡掉
.box#box
 .scroll-bar#bar
 .wrapper#wrapper
 img.items#items(src="https://ianchen.thisistap.com/wp-content/uploads/OOD.jpg" width="300px")
.box
 border: 1px solid #000
 width: 300px
 height: 300px
 overflow: hidden
  
.wrapper
 width: 100%
 height: 100%
 overflow-y: scroll
 padding-right: 28px

Display

用CSS做出一個假的bar

利用絕對定位將假bar定位在box的右上方

.box#box
 .scroll-bar#bar
 .wrapper#wrapper
.box
 border: 1px solid #000
 width: 300px
 height: 300px
 overflow: hidden
 position: relative
  
.wrapper
 width: 100%
 height: 100%
 overflow-y: scroll
 padding-right: 28px

.scroll-bar
 width: 8px
 height: 84px
 border-radius: 30px
 background-color: #7F7F7F
 position: absolute
 top: 0px
 right: 2.5px

Display

.

算出scroll-bar的長度

scroll-bar的兩種可能性

  1. 內容items的高度 小於 外層box的高度→不會出現scroll-bar
  2. 內容items的高度 大於 外層box的高度→出現scroll-bar
    scroll-bar的長度公式:外層box高度×(外層box高度÷內容items高度)
window.addEventListener("load", function(){
 
 if(items.clientHeight>=box.clientHeight){
  bar.style.display="none"; //如果內容items高度小於外層box,隱藏scroll-bar
 }else{
  bar.style.height=box.clientHeight * (box.clientHeight / items.clientHeight) + "px";
  //外層box高度×(外層box高度÷內容items高度)
 }
 
})

當發生滑動時,改變bar的top

  1. 當內容wrapper發生滑動→scroll事件
  2. 改變bar的top值→但是top值的MAX不是100
    計算top值的公式:目前items可視範圍離外層wrapper有多遠÷(items高度−wrapper高度)×(wrapper高度−bar高度)

 

 

 

customize scroll-bar

scrollbar height =
box.clientHeight * (box.clientHeight / content.offsetHeight)