步驟

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)