當(dāng)前位置:首頁(yè) > IT技術(shù) > Web編程 > 正文

側(cè)邊導(dǎo)航欄滾動(dòng)條---CSS overflow實(shí)現(xiàn)
2021-09-30 10:29:16

給側(cè)邊導(dǎo)航欄增加滾動(dòng)條,element的滾動(dòng)條好像不太好用,所以就使用CSS 的overflow來(lái)實(shí)現(xiàn),overflow屬性給父元素增加

HTML

?

?CSS

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

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

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

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

效果呈現(xiàn),長(zhǎng)度超過(guò)屏幕,自動(dòng)顯示豎向滾動(dòng)條

?

本文摘自 :https://www.cnblogs.com/

開(kāi)通會(huì)員,享受整站包年服務(wù)立即開(kāi)通 >