五款jquery改变滚动条样式

header引入CSS样式

<link rel="stylesheet" type="text/css" href="./jquery.mCustomScrollbar.css" />

body结束之前引入jquery以及jquery滚动条插件

<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="jquery.mCustomScrollbar.concat.min.js"></script>

外层DIV为固定高度，超出自动出现滚动条 overflow: auto;

效果1

HTML结构

    <div id="content-9" class="content vertical-images">
        <div style="height:1000px;"></div>
    </div>

javascript代码

        (function($){
            $(window).on("load",function(){
                $("#content-9").mCustomScrollbar({
                    scrollButtons:{enable:true,scrollType:"stepped"},
                    keyboard:{scrollType:"stepped"},
                    mouseWheel:{scrollAmount:188},//移动速度
                    theme:"rounded-dark",
                    autoExpandScrollbar:true,//自动扩展的滚动条
                    snapAmount:188,//提前量
                    snapOffset:65//捕捉偏移 
                });
                
            });
        })(jQuery);

效果2

HTML结构

    <div class="mCustomScrollbar" data-mcs-theme="inset-2-dark">
        <div style="height:300px;"></div>
    </div>

效果3

    <div class="mCustomScrollbar" style="background:#333;">
        <div style="height:300px;"></div>
    </div>

效果4

HTML结构

    <div id="content-1" style="background:#333;">
        <div style="height:300px;"></div>
    </div>

javascript代码

        (function($){
            $(window).on("load",function(){
                
                $("#content-1").mCustomScrollbar({
                    theme:"light-3",
                    scrollButtons:{enable:true}//滚动按纽 
                });

            });
        })(jQuery);

效果5

HTML结构

    <div class="panel-body">
        <div style="height:300px;"></div>
    </div>

javascript代码

        (function($){
            $(window).on("load",function(){
                $(".panel-body").mCustomScrollbar({
                    setHeight:200,//设置高度 
                    theme:"dark-3"
                });
            });
        })(jQuery);

需要的图片素材，右击保存为mCSB_buttons.png，放到jquery.mCustomScrollbar.css目录下即可

上一篇：忘记密码 用邮箱来设置新密码-Thinkphp5框架

下一篇：导出Excel表格，需要安装PHPExcel-1.8扩展