這個大概是修改滾動條樣式方法最全的文章了

時間 2019-11-29

標籤這個大概是修改滾動條樣式方法文章简体版

原文原文鏈接

背景：

在平時的項目開發中，因爲滾動條在各個瀏覽器中的實現是不一致的，視覺對於滾動條的樣式有必定的定製化要求，或者統一各個瀏覽器的滾動條樣式(至少我遇到了)。下面就來講說修改滾動條樣式的方式。css

經過CSS來修改

1. 建立一個簡單的帶滾動條的html頁面：

代碼以下：html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL + VUE_APP_ASSETS + '/' %>favicon2.ico" />
    <title>滾動條樣式</title>
    <style>
      .father{
        height:300px;
        width: 300px;
        overflow: auto
      }
      .child{
        width: 400px;
        height: 400px
      }
    </style>
  </head>
  <body>
   <div class="father">
      <div class="child">111</div>
   </div>
  </body>
</html>
複製代碼

這個頁面在chrome、firefox、ie下的展現：前端

chrome：vue

firefox:react

IE:git

主流瀏覽器樣式各不一樣，CSS3中有對滾動條修改的方式，以下代碼：github

.father::-webkit-scrollbar{
        width:10px;
        height:10px;
        /**/
      }
      .father::-webkit-scrollbar-track{
        background: rgb(239, 239, 239);
        border-radius:2px;
      }
      .father::-webkit-scrollbar-thumb{
        background: #bfbfbf;
        border-radius:10px;
      }
      .father::-webkit-scrollbar-thumb:hover{
        background: #333;
      }
      .father::-webkit-scrollbar-corner{
        background: #179a16;
      }複製代碼

chrome下修改後的效果

其它兩個瀏覽器不變。web

由於是-webkit-開頭的，只針對webkit內核瀏覽器有效。chrome

那怎麼修改IE瀏覽器的滾動條樣式呢？瀏覽器

.father{
        scrollbar-arrow-color: red;
        scrollbar-face-color: #333;
        scrollbar-3dlight-color: #666; 
        scrollbar-highlight-color: #666; 
        scrollbar-shadow-color: #999; 
        scrollbar-darkshadow-color: #666; 
        scrollbar-track-color: #666; 
        scrollbar-base-color:#f8f8f8
　    }複製代碼

IE下修改後的效果

這段代碼也只針對IE下的滾動條修改，對其它兩款瀏覽器無用。IE也僅能修改其顏色，寬度沒法自定義。

firefox怎麼修改呢？

這個修改不了啊！！！！！！！(若是有隻經過css修改firefox滾動條樣式的同窗，請賜教)

那怎麼辦？

只能經過js來實現了，前端沒有js實現不了的需求。

經過JS自定義滾動條

首先上效果

chrome:

IE與firefox同樣的效果，就截了個圖：

實現步驟

1. 隱藏滾動條

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL + VUE_APP_ASSETS + '/' %>favicon2.ico" />
    <title>滾動條樣式</title>
    <style>
      .container{
        height: 100%;
        overflow: hidden;
        position: relative;
      }
      .father{
        overflow: scroll;
        height: 300px;
        margin-bottom: -17px;
        margin-right: -17px;
      }
      
      .vertical-scroll{
        position: absolute;
        right: 0;
        width: 12px;
        top:0;
        transition: all .3s ease-out;
        visibility: visible;
        background-color:#f5f5f5;
        height: 100%
      }
      .rail{
        width: 100%;
        height: 100%;
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        background-color: #ccc;
        border-radius: 1000px;
        cursor: pointer;
        -webkit-transition: background-color .3s;
        transition: background-color .3s;
      }
    </style>
  </head>
  <body>
   <div class="container">
      <div class="father">
        <div>111</div>
        <div>111</div>
        <div>111</div>
        <div>111</div>
        <div>111</div>
        <div>111</div>
        <div>111</div>
        <div>111</div>
        <div>111</div>
        <div>111</div>
        <div>111</div>
        <div>111</div>
        <div>111</div>
        <div>111</div>
        <div>111</div>
        <div>111</div>
        <div>111</div>
        <div>1221</div>
        <div>1221</div>
        <div>1221</div>
      </div>
      <div class="vertical-scroll">
        <div class="rail">
        </div>
      </div>
   </div>
  </body>
</html>

複製代碼

2. 書寫JS

縱向滾動條大概結構已經寫好，接下來就開始寫js了。

<script>
    var fatherScrollHeight,fatherClientHeight;// 父高度,滾動高度
    var warp = document.querySelector('.father');
    fatherClientHeight = warp.clientHeight; // 獲取父高度 
    fatherScrollHeight = warp.scrollHeight; // 獲取父可滾動高度
    var present = fatherClientHeight / fatherScrollHeight; // 計算滾動條應該佔多高
    var scrollWarp = document.querySelector('.rail'); 
    scrollWarp.style.height = present*100 + '%'; // 用百分比計算rail的高度
    warp.addEventListener('scroll',function(e){ // 添加滾動事件
      console.log(e.target.scrollTop);
      scrollWarp.style.transform = 'translateY(' + e.target.scrollTop * 100/fatherClientHeight + '%)'
    })
  </script>複製代碼

完成。