側邊導航欄滾動條---CSS overflow實現

給側邊導航欄增加滾動條，element的滾動條好像不太好用，所以就使用CSS 的overflow來實現，overflow屬性給父元素增加

HTML

 

 CSS

/*滾動條*/
.scroll {
  height: calc(100vh - 52px);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: auto;
}

/* 定義滾動條樣式 */
::-webkit-scrollbar {
  width: 5px;
  height: 10px;
  background-color: #195fab;
}

/*定義滾動條軌道 內陰影+圓角*/
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0px #072E97;
  border-radius: 10px;
  background-color: #195fab;
}

/*定義滑塊 內陰影+圓角*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 0px rgba(240, 240, 240, .5);
  background-color: rgba(240, 240, 240, .5);
}

效果呈現，長度超過屏幕，自動顯示豎向滾動條