jQuery的滚动条样式改变

「爱情、让人受尽委屈。」 2023-05-29 06:15 1阅读 0赞

# jQuery的滚动条样式改变 #

### 效果 ###

![在这里插入图片描述][20191104223359781.gif]

### 代码 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <link rel="stylesheet" href="jquery.mCustomScrollbar.css">
        <style> .textarea{ width: 400px; height: 200px; border: 1px solid black; overflow: auto; margin: 200px auto; } </style>
        <script src="jquery-3.4.1.js"></script>
        <script src="jquery.mCustomScrollbar.concat.min.js"></script>
        <script> $(function(){ $(".textarea").mCustomScrollbar();//初始化滚动条 }); </script>
    </head>
    <body>
        <div class="textarea" data-mcs-theme="dark">//初始化滚动条
            abc <br>abc <br>abc <br>abc <br>abc <br>abc 
            <br>abc <br>abc <br>abc <br>abc <br>abc <br>
            abc <br>abc <br>abc <br>abc <br>abc <br>abc 
            <br>abc <br>abc <br>abc <br>abc <br>abc <br>
        </div>
    </body>
    </html>

### 步骤： ###

1.进入[http://manos.malihu.gr/jquery-custom-content-scroller/\#expand-info][http_manos.malihu.gr_jquery-custom-content-scroller_expand-info]  
2.找到以下界面![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4ODk5OA_size_16_color_FFFFFF_t_70]  
3.进入效果预览界面，查看插件做好的滚动条效果,并且记住你想要设置的滚动条的主题  
theme  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4ODk5OA_size_16_color_FFFFFF_t_70 1]  
4.找到第二步的界面点集 download 下载插件  
5.查看插件首页的使用说明  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4ODk5OA_size_16_color_FFFFFF_t_70 2]  
导入下载文件包中与上图中相对应的 css 文件和 js 文件。  
注意：该插件是基于jQuery的应在导入插件前先导入该插件  
6.初始化滚动条的html代码和js代码  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4ODk5OA_size_16_color_FFFFFF_t_70 3]  
html代码中的 dark 为你想要设置滚动条的主题，参考第三步，  
7.此时已经可以成功使用滚动条，但是滚动条的样式（宽度，高度等）并不一定适宜  
应该改变滚动条的样式  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4ODk5OA_size_16_color_FFFFFF_t_70 4]

$(".textarea").mCustomScrollbar({ 
                    set_width:120,  //控制区域的宽度
                    set_height:200, //控制区域的高度
                    setTop:"-50px", //y轴滚动条距离顶端的初始位置
                    setLeft: "-50px",//x轴滚动条据左端的初始位置
                    axis:"xy"      //设置滚动条位于x轴还是y轴或者xy轴都有
                });

改变滚动条各个组件的宽高及颜色等  
找到下图所在位置  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4ODk5OA_size_16_color_FFFFFF_t_70 5]  
找到你想要改变的组件样式  
如：.mCSB\_dragger\_bar 代表滚动块  
.mCSB\_button 代表向上或向左按钮

.mCSB_dragger_bar{ 
               width: 50px !important;
               background: red !important;
           }

分别改变宽度和背景颜色，应设置 !important 增加优先级

[20191104223359781.gif]: https://img-blog.csdnimg.cn/20191104223359781.gif
[http_manos.malihu.gr_jquery-custom-content-scroller_expand-info]: http://manos.malihu.gr/jquery-custom-content-scroller/#expand-info
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4ODk5OA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2019110508092198.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4ODk5OA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4ODk5OA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191105081046799.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4ODk5OA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4ODk5OA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2019110508144895.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4ODk5OA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4ODk5OA_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191105081845250.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4ODk5OA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4ODk5OA_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191105092123751.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4ODk5OA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4ODk5OA_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20191105092320713.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4ODk5OA==,size_16,color_FFFFFF,t_70