滚动条插件 mCustomScrollbar 使用介绍

最新推荐文章于 2024-05-20 09:34:22 发布

chailovely

最新推荐文章于 2024-05-20 09:34:22 发布

阅读量1.3k

点赞数

HTML

在HTML文档头部引入mCustomScrollbar.css

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="/path/to/jquery.mCustomScrollbar.css" />
</head>

在body的结束标签之前引入插件所需js文件

<script src="/path/to/jquery/1.11.1/jquery.min.js"></script>
<script src="/path/to/jquery.mCustomScrollbar.concat.min.js"></script>

CSS

需要创建滚动条的元素必须具有明确的CSS属性使元素形成包裹的块级元素：

具有高度值（height）
最大高度值（max-height）
具有overflow属性值为auto或者hidden
元素的内容具有足够的高度（或宽度，针对横向滚动条）

初始化

通过JavaScript初始化

把相关的文件加载进页面之后，call mCustomScrollbar function on the element selector you want to add the scrollbar(s)

<script>
    (function($){
        $(window).on("load",function(){
            $(".content").mCustomScrollbar();
        });
    })(jQuery);
</script>

通过HTML初始化

在你需要创建自定义滚动条的元素的标签里添加默认的class="mCustomScrollbar"类，同时你可以根据需要的设置它的 axis 通过 HTML 的 data-msc-axis 属性，例如属性值为"x" 代表水平滚动条，属性值为 "y"代表垂直滚动条。或者设置它的主题通过HTML的 data-msc-theme属性。
举个例子~

<div class="mCustomScrollbar" data-mcs-theme="dark">
  <!-- your content -->
</div>

基础设置和可选参数

axis

插件默认情况下会生成垂直方向的滚动条。如果要创建水平或水平垂直两个方向的滚动条的话，可以在mCustomScrollbar的函数里将axis的选项设置为"x"或"yx"，例如

$(".content").mCustomScrollbar({
    axis:"x" // horizontal scrollbar
});
$(".content").mCustomScrollbar({
    axis:"yx" // vertical and horizontal scrollbar
});

theme

要快速改变滚动条的外观，可以设置 theme 选项的参数为任何一种已经在 jquery.mCustomScrollbar.css 中定义好的主题，例如

$(".content").mCustomScrollbar({
    theme:"dark"
});

插件下载地址：链接: https://pan.baidu.com/s/1whMrcoCnZIPpiqIBRwxmtw 密码: a11e

chailovely

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
滚动条插件 mCustomScrollbar 使用介绍

HTML在HTML文档头部引入mCustomScrollbar.css&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;link rel="stylesheet" href="/path/to/jquery.mCustomScrollbar.
复制链接

扫一扫