css 自定義滾動條顏色

本文轉載自查看原文 2019-12-19 17:50 5176 css

1. div代碼。

<body>
  <div class="div-box box1">
    <div class="div-text"></div>
  </div>
</body>

2. css代碼。

<style>
  .div-box {
    width: 600px;
    height: 200px;
    overflow-y: auto;
    border: 1px solid #DCDFE6;
    margin: 20px;
  }
  .box1::-webkit-scrollbar{
    height: 20px;
    width: 20px;
  }
</style>

　　設置滾動條顏色：

.div-box {
    width: 600px;
    height: 200px;
    overflow-y: auto;
    border: 1px solid #DCDFE6;
    margin: 20px;;
    scrollbar-arrow-color: #000; /*頂部/底部圖標顏色*/
    scrollbar-face-color: #333; /*滾動條顏色*/
    scrollbar-shadow-color: #999;/*滾動條陰影顏色*/
  }

　　設置滾動條尺寸：

/*定義滾動條高寬及背景 高寬分別對應橫豎滾動條的尺寸*/
  .div-box::-webkit-scrollbar{
    width: 16px;
    height: 16px;
    background-color: #F5F5F5;
  }
  
  /*定義滾動條軌道 內陰影+圓角*/
  .div-box::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
  }
  
  /*定義滑塊 內陰影+圓角*/
  .div-box::-webkit-scrollbar-thumb{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
  }

轉載自: https://blog.csdn.net/hanshileiai/article/details/40398177

免責聲明！

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

猜您在找 css3自定義移動端滾動條 css3自定義滾動條背景透明 css自定義滾動條樣式 vue自定義滾動條自定義樣式滾動條自定義滾動條原理不滾動時隱藏自定義滾動條 CSS3自定義滾動條樣式 -webkit-scrollbar [分享] 通過修改CSS自定義chrome滾動條樣式 Javascript和jquery事件--滾動條事件和自定義滾動條事件樣式