jq滚动条插件mCustomScrollbar使用介绍

最新推荐文章于 2023-03-29 09:33:45 发布

吱一枝

最新推荐文章于 2023-03-29 09:33:45 发布

阅读量1k

点赞数

文章标签： JQuery javascript CSS

本文链接：https://blog.csdn.net/weixin_41856301/article/details/84541607

版权

本文介绍了jq滚动条插件mCustomScrollbar的使用方法，包括HTML、CSS和JS的配置。通过引入相关文件，定义div并进行JS初始化，可以设置滚动条的方向、滚动惯性和样式等。此外，还提供了禁用和启用滚动条的技巧。

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

官网链接：mCustomScrollbar
下载 jquery.mCustomScrollbar.js和jquery.mCustomScrollbar.css 文件

直接附上代码！！

html

首先在HTML文档头部引入mCustomScrollbar.css

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.css" />
</head>

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


<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.js"></script>

在body中定义一个id的div，用于放需要滚动的内容块


//id名随意
<div id="mainDiv"></div>

CSS

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
    /* 1st scrollbar dragger style... */
}
.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
	/* 鼠标滑过之后的样式... */
}

js

JS初始化代码

$(document).ready(function () {
    $("#mainDiv").mCustomScrollbar()
});

基础设置和可选参数

滚动条滚动方向 axis

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

scrollInertia: integer
Scroll-to事件的持续时间（毫秒计）

$("#mainDiv").mCustomScrollbar({
	scrollInertia:3000
});

scrollEasing: “string”
Scroll-to时间的动画过渡效果,可以是: “linear”, “easeOut”, “easeInOut”
例子：

$("#mainDiv").mCustomScrollbar(“scrollTo”,”bottom”,{
	scrollEasing:”easeOut”
});

disable

//用法
 $("#mainDiv").mCustomScrollbar(“disable”);

被禁用掉的滚动条可以通过重新调用 update 方法来启用
为了禁止滚动条并且重置它的内容所处的位置，设置它的方法的 reset 参数为 true

	$("#mainDiv").mCustomScrollbar(“disable”,true);

滚动条样式和主题

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

详细的自定义方法可查看官方文档