【JQuery】HTML自定义滚动条（mCustomScrollbar）

最新推荐文章于 2023-05-05 23:22:22 发布

diligentyang

最新推荐文章于 2023-05-05 23:22:22 发布

阅读量1.8k

点赞数 2

分类专栏： JavaScript 文章标签： jquery html 滚动条

本文链接：https://blog.csdn.net/qq_28602957/article/details/72551708

版权

JavaScript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

实现效果如下所示

mCustomScrollbar 是个基于 jQuery UI 的自定义滚动条插件，它可以让你灵活的通过 CSS 定义网页的滚动条，并且垂直和水平两个方向的滚动条都可以定义，它通过 Brandon Aaron jquery mouse-wheel plugin 提供了鼠标滚动的支持，并且在滚动的过程中，还可以缓冲滚动使得滚动更加的平滑，还可以自动调整滚动条的位置和定义滚动到的位置等。总之，你知道非常好用就是了，:-)

用法：

//STEP 1
<link href="jquery.mCustomScrollbar.css" rel="stylesheet" />

//STEP 2
<script src="../js/jquery-1.9.1.js"></script>
    <script src="../js/jquery.mCustomScrollbar.js"></script>

//STEP 3
<script>
        (function($){
            $(window).load(function(){
                $("#content_1").mCustomScrollbar({
                    scrollButtons:{
                        enable:true
                    }
                });
            });
        })(jQuery);
    </script>

就可以实现如下图所示的效果

插件下载地址：http://download.csdn.net/detail/qq_28602957/9847075

我的代码：

<html>
<head>
    <meta charset="UTF-8">
    <title>normal</title>
    <style>
        #content{
            background: #0f0f0f;color:#fff0ff;height: 300px;width:300px;
        }
        .spinner {
            width: 20px;
            height: 20px;
            position: relative;
            margin: 10px auto;
        }

        .double-bounce1, .double-bounce2 {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #67CF22;
            opacity: 0.6;
            position: absolute;
            top: 0;
            left: 0;

            -webkit-animation: bounce 2.0s infinite ease-in-out;
            animation: bounce 2.0s infinite ease-in-out;
        }

        .double-bounce2 {
            -webkit-animation-delay: -1.0s;
            animation-delay: -1.0s;
        }

        @-webkit-keyframes bounce {
            0%, 100% { -webkit-transform: scale(0.0) }
            50% { -webkit-transform: scale(1.0) }
        }

        @keyframes bounce {
            0%, 100% {
                transform: scale(0.0);
                -webkit-transform: scale(0.0);
            } 50% {
                  transform: scale(1.0);
                  -webkit-transform: scale(1.0);
              }
        }
    </style>
    <link href="../css/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div id="content">
        11111111111111111111111111111<br>
        11111111111111111111111111111<br>
        11111111111111111111111111111<br>
        11111111111111111111111111111<br>
        11111111111111111111111111111<br>
        11111111111111111111111111111<br>
        11111111111111111111111111111<br>
        11111111111111111111111111111<br>
        11111111111111111111111111111<br>
        11111111111111111111111111111<br>
        11111111111111111111111111111<br>
        11111111111111111111111111111<br>
        11111111111111111111111111111<br>
        11111111111111111111111111111<br>
        11111111111111111111111111111<br>
        11111111111111111111111111111<br>
        11111111111111111111111111111<br>
        11111111111111111111111111111<br>
        11111111111111111111111111111<br>
        11111111111111111111111111111<br>
        11111111111111111111111111111<br>
        11111111111111111111111111111<br>
        11111111111111111111111111111<br>
        11111111111111111111111111111<br>
        11111111111111111111111111111<br>
    </div>
    <div class="scroll-pct">当前位置:0%</div>
    <script src="../js/jquery-1.9.1.js"></script>
    <script src="../js/jquery.mCustomScrollbar.js"></script>
    <script>
        (function($){
            $(window).load(function(){
                var flag = true;
                $('#content').append('<div class="spinner"> <div class="double-bounce1"></div> <div class="double-bounce2"></div> </div>');

                $("#content").mCustomScrollbar({
                    scrollButtons:{
                        enable:true,//是否显示上下箭头 注上下箭头的图片在 css/mCSB_buttons.png里面，要和css放一起
                        //scrollType:"continuous",//点击滚动是否有停顿效果
                        scrollType:"pixels",//点击滚动是否有停顿效果
                        scrollSpeed:20,     //点击移动的速度
                        scrollAmount:100 //点击滚动按钮移动的距离
                    },
                    set_height:"300px",//设置可见内容的宽度
                    theme:"light-thick",//以下是主题
                    //theme:"rounded-dots",
                    //theme:"dark-thin",
                    //theme:"light-3",
                    //theme:"3d-thick",
                    //theme:"3d",
                    //theme:"rounded-dark",
                    autoDraggerLength: true,//根据内容区域自动调整滚动条拖块的长度 值:true,false
                    mouseWheelPixels: 100,//滚动一下移动的距离
                    autoHideScrollbar:true,//是否自动隐藏滚动条
                    callbacks: {
                        onScrollStart: function() {
                           // $('body').append('滚动开始//');
                        },
                        onScroll: function() {
                            //$('body').append('滚动结束//');
                        },
                        onTotalScroll: function() {
                            //$('body').append('滚动至底部//');

                            var data = '<div style="width:300px;height:30px;background: red;"></div>';
                            $(".spinner").remove();//移除加载图标
                            $("#content .mCSB_container").append(data);//追加新内容
                            if(flag){//如果flag为true，则追加加载图标。
                                $('#content .mCSB_container').append('<div class="spinner"> <div class="double-bounce1"></div> <div class="double-bounce2"></div> </div>');

                            }
                            $("#content").mCustomScrollbar("update"); //update scrollbar according to newly appended content
                        },
                        onTotalScrollBack: function() {
                           // $('body').append('滚动至顶部//');
                        },
                        whileScrolling: function() {
                           // $('body').append('...滚动中...//');

                            $(".scroll-pct").html("当前位置:"+mcs.topPct+"%");
                            if(mcs.topPct>=90){
                                //
                            }
                        },
                    },

                });
            });
        })(jQuery);
    </script>
</body>
</html>

具体参数列表：

https://github.com/diligentyang/mCustomScrollbar/tree/master/example

diligentyang

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【JQuery】HTML自定义滚动条（mCustomScrollbar）

实现效果如下所示mCustomScrollbar 是个基于 jQuery UI 的自定义滚动条插件，它可以让你灵活的通过 CSS 定义网页的滚动条，并且垂直和水平两个方向的滚动条都可以定义，它通过 Brandon Aaron jquery mouse-wheel plugin 提供了鼠标滚动的支持，并且在滚动的过程中，还可以缓冲滚动使得滚动更加的平滑，还可以自动调整滚动条的位置和定义滚动到的位置等。
复制链接

扫一扫