jQuery custom scrollbarjQuery自定义滚动条

最新推荐文章于 2024-08-09 07:08:34 发布

Jedi Hongbin

最新推荐文章于 2024-08-09 07:08:34 发布

阅读量527

点赞数 1

分类专栏：大前端文章标签： jquery

本文链接：https://blog.csdn.net/printf_hello/article/details/104112294

版权

大前端专栏收录该内容

134 篇文章 3 订阅

订阅专栏

可以去GitHub上找对应的文件下载，
https://github.com/mustache/mustache.github.com.
点击下载压缩包
在这里插入图片描述
下载完custom scrollbar 的压缩包，解压，找到里面下张图两个划线的css文件和js文件就可以用了。
要注意的是要先导入jQuery custom scrollbar的css文件，再导入我们自己的css文件，js文件也是一样，先导入jQuery的js再导入jQuery custom scrollbar 的js文件，最后才是我们自己写的js文件
在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <title>music</title>
    <link rel="stylesheet" href="../jquery.mCustomScrollbar.css">
    <link href="../../../img/sup.ico" rel="icon">
    <link href="../css/style.css" rel="stylesheet">
    <script src="../../../jquery-3.4.1.min.js"></script>
    <script src="../jquery.mCustomScrollbar.concat.min.js"></script>
    <script src="../js/index.js"></script>
</head>

初始化js，在js中初始化jQuery custom scrollbar

$(function () {
//自定义滚动条
    $('.list').mCustomScrollbar();//.list为我要设置的元素的class
});

初始化html，在html中找到要设置的元素，比如要给ul设置个自定义滚动条,在后面加上data-mcs-theme="minimal-dark"就行

<ul class="list" data-mcs-theme="minimal-dark">

这样就可以实现了
在这里插入图片描述
原本是这样的

可以去官网查看各种样式的滚动条： http://manos.malihu.gr/jquery-custom-content-scroller/

Jedi Hongbin

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录