• 當前位置:首頁 > IT技術 > Web編程 > 正文

    側邊導航欄滾動條---CSS overflow實現
    2021-09-30 10:29:16

    給側邊導航欄增加滾動條,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);
    }

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

    ?

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

    開通會員,享受整站包年服務
    国产呦精品一区二区三区网站|久久www免费人咸|精品无码人妻一区二区|久99久热只有精品国产15|中文字幕亚洲无线码