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

33,101 阅读4分钟


背景:

在平时的项目开发中,由于滚动条在各个浏览器中的实现是不一致的,视觉对于滚动条的样式有一定的定制化要求,或者统一各个浏览器的滚动条样式(至少我遇到了)。下面就来说说修改滚动条样式的方式。


通过CSS来修改

1. 创建一个简单的带滚动条的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:

chrome.jpg

firefox:

firefox.jpg

IE:

ie.jpg

主流浏览器样式各不同,CSS3中有对滚动条修改的方式,如下代码:


 .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下修改后的效果

chrome2.jpg

其它两个浏览器不变。

因为是-webkit-开头的,只针对webkit内核浏览器有效。


那怎么修改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下修改后的效果

IE2.jpg

这段代码也只针对IE下的滚动条修改,对其它两款浏览器无用。IE也仅能修改其颜色,宽度无法自定义。


firefox怎么修改呢?

这个修改不了啊!!!!!!!(如果有只通过css修改firefox滚动条样式的同学,请赐教)


那怎么办?

只能通过js来实现了,前端没有js实现不了的需求。



通过JS自定义滚动条


首先上效果

chrome:

Screenshot-2019-11-26-1574732178990.gifIE与firefox一样的效果,就截了个图:

firefox3.jpg

IE3.jpg

实现步骤

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组件,这里就不献丑了。

第一次发文,大佬们请多多赐教!