HTML自定义滚动条（仿网易邮箱滚动条）转载

它是使用CSS中的伪元素来实现的，主要由以下三个来完成：
1. -webkit-scrollbar：定义滚动条的样式，如长宽。
2. -webkit-scrollbar-thumb：定义滚动条上滑块的样式。
3. -webkit-scrollbar-track：定义滚动条主干部分（背景）的样式。

4.-webkit-scrollbar-button：滚动条轨道两端的按钮，允许通过点击微调小方块的位置，可以用display:none让其不显示。

5.-webkit-scrollbar-track-piece：内层轨道，滚动条中间部分（除去）。

6.-webkit-scrollbar-corner：边角，及两个滚动条的交汇处。

7.-webkit-scrollbar-corner ：边角，及两个滚动条的交汇处

接下来我们就把它的核心代码拿下来瞧瞧。

滚动条样式

 .nui-scroll::-webkit-scrollbar {

     width: 8px;//表示垂直滚动条的宽度

     height: 8px;//表示水平滚动条的高度

 }

可以看出给了一个nui-scroll这么一个类选择器，然后设置滚动条的样式。width和height的含义上面已经给出了。

滚动条滑块样式

 /*正常情况下滑块的样式*/

 .nui-scroll::-webkit-scrollbar-thumb {

     background-color: rgba(,,,.);

     border-radius: 10px;

     -webkit-box-shadow: inset 1px 1px  rgba(,,,.);

 }

 /*鼠标悬浮在该类指向的控件上时滑块的样式*/

 .nui-scroll:hover::-webkit-scrollbar-thumb {

     background-color: rgba(,,,.);

     border-radius: 10px;

     -webkit-box-shadow: inset 1px 1px  rgba(,,,.);

 }

 /*鼠标悬浮在滑块上时滑块的样式*/

 .nui-scroll::-webkit-scrollbar-thumb:hover {

   background-color: rgba(,,,.);

     -webkit-box-shadow: inset 1px 1px  rgba(,,,.);

 }

滑块的样式也很简单。

滚动条主干部分样式

 /*正常时候的主干部分*/

 .nui-scroll::-webkit-scrollbar-track {

     border-radius: 10px;

     -webkit-box-shadow: inset   6px rgba(,,,);

     background-color: white;

 }

 /*鼠标悬浮在滚动条上的主干部分*/

 .nui-scroll::-webkit-scrollbar-track:hover {

     -webkit-box-shadow: inset   6px rgba(,,,.);

     background-color: rgba(,,,.);

 }

我们的代码基本上就完了，最后设置一下该控件显示滚动条，要显示滚动条那么就得给定它的宽和高并且设置其样式overflow为auto。

显示滚动条

 .nui-scroll{

     margin-left: 100px;/*为了咱们看着好看就向右移动一点*/

     border: 1px solid #;/*给个边框看着更舒服*/

     width: 200px;/*设置宽*/

     height: 500px;/*设置高*/

     overflow: auto;/*当内容溢出时显示滚动条*/

 }

有了上面的类，我们再定义一个DIV使用该类就大功告成了！

 <div class="nui-scroll">

     <br/>

     <br/>

     <!--这里有好多上面这结构为了节省篇幅就省去了-->

 </div>

最后我们运行一下看看结果：

最后给出所有的代码，小伙伴们可以直接把代码拷过去稍加修改做成更加高大上的滚动条，如果大家懒得粘贴也可以直接下载代码，不要任何币，完全免费哦。

完整代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>滚动条示例</title>

     <style type="text/css">

         .nui-scroll{

             margin-left: 100px;

             border: 1px solid #;

             width: 200px;

             height: 500px;

             overflow: auto;

         }

         .nui-scroll::-webkit-scrollbar {

             width: 8px;

             height: 8px;

         }

         /*正常情况下滑块的样式*/

         .nui-scroll::-webkit-scrollbar-thumb {

             background-color: rgba(,,,.);

             border-radius: 10px;

             -webkit-box-shadow: inset 1px 1px  rgba(,,,.);

         }

         /*鼠标悬浮在该类指向的控件上时滑块的样式*/

         .nui-scroll:hover::-webkit-scrollbar-thumb {

             background-color: rgba(,,,.);

             border-radius: 10px;

             -webkit-box-shadow: inset 1px 1px  rgba(,,,.);

         }

         /*鼠标悬浮在滑块上时滑块的样式*/

         .nui-scroll::-webkit-scrollbar-thumb:hover {

             background-color: rgba(,,,.);

             -webkit-box-shadow: inset 1px 1px  rgba(,,,.);

         }

         /*正常时候的主干部分*/

         .nui-scroll::-webkit-scrollbar-track {

             border-radius: 10px;

             -webkit-box-shadow: inset   6px rgba(,,,);

             background-color: white;

         }

         /*鼠标悬浮在滚动条上的主干部分*/

         .nui-scroll::-webkit-scrollbar-track:hover {

             -webkit-box-shadow: inset   6px rgba(,,,.);

             background-color: rgba(,,,.);

         }

     </style>

 </head>

 <body>

     <div class="nui-scroll">

         <br/>

         <br/>

         <!--这里有好多上面这结构为了节省篇幅就省去了-->

     </div>

 </body>

 </html>