这个大概是修改滚动条样式方法最全的文章了

时间 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>复制代码

完成。

总结

本文只是用最原生的方式来阐述统一滚动条的原理，这里仅实现其一部分功能，还有不少的功能须要完善，好比添加rail(轨道)的拖动事件与鼠标离开事件，还有样式须要与视觉一致，高度不够滚动时的判断等等。因为工做缘由，没得继续往下写了。

因为本身用的vue与react框架写业务，它们都有现成的自定义滚动条组件(公司内部封装)，有须要的能够去github搜索一下，仍是有不少写好的scroll组件，这里就不献丑了。

第一次发文，大佬们请多多赐教！