滾動條樣式修改(瀏覽器兼容)


.beauty-scroll{
      scrollbar-color:  #1890FF #91D5FF;  /* 第一個方塊顏色,第二個軌道顏色(用於更改火狐瀏覽器樣式) */
      scrollbar-width: thin;  /* 火狐滾動條無法自定義寬度,只能通過此屬性使滾動條寬度變細 */
      -ms-overflow-style:none;  /* 隱藏滾動條(在IE和Edge兩個瀏覽器中很難更改樣式,固采取隱藏方式) */

      /* 以下是chrome瀏覽器自定義滾動條樣式方式 */
      &::-webkit-scrollbar {/*滾動條整體樣式*/
            width: 3px;     /*高寬分別對應橫豎滾動條的尺寸*/
            height: 1px;
      }
      &::-webkit-scrollbar-thumb {/*滾動條里面小方塊*/
            border-radius: 3px;
            -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0);
            background: #1890FF;
    }
      &::-webkit-scrollbar-track {/*滾動條里面軌道*/
            -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0);
            border-radius: 3px;
            background: #91D5FF;
      }
}

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM