jQuery的滚动条样式改变

最新推荐文章于 2021-06-09 16:59:33 发布

大白手记

最新推荐文章于 2021-06-09 16:59:33 发布

阅读量733

点赞数

CC 4.0 BY-SA版权

文章标签： jQuery 滚动条 jQuery custom content scroller

本文链接：https://blog.csdn.net/weixin_45088998/article/details/102906944

本文介绍如何使用jQuery插件mCustomScrollbar自定义网页滚动条的样式，包括宽度、高度、颜色等属性调整，实现美观且实用的滚动条效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery的滚动条样式改变

效果

在这里插入图片描述

代码

<!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
2.找到以下界面在这里插入图片描述
3.进入效果预览界面，查看插件做好的滚动条效果,并且记住你想要设置的滚动条的主题
theme

4.找到第二步的界面点集 download 下载插件
5.查看插件首页的使用说明

导入下载文件包中与上图中相对应的 css 文件和 js 文件。
注意：该插件是基于jQuery的应在导入插件前先导入该插件
6.初始化滚动条的html代码和js代码
在这里插入图片描述
html代码中的 dark 为你想要设置滚动条的主题，参考第三步，
7.此时已经可以成功使用滚动条，但是滚动条的样式（宽度，高度等）并不一定适宜
应该改变滚动条的样式

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

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

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

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