滚动条插件 mCustomScrollbar 使用介绍

九霄123

已于 2022-08-30 11:36:27 修改

阅读量2k

点赞数

分类专栏： css 文章标签： html

于 2021-12-02 15:48:36 首次发布

本文链接：https://blog.csdn.net/lyxkgc/article/details/121678665

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

官网：
http://manos.malihu.gr/jquery-custom-content-scroller/

用法

引入插件的css js 。在容器标签，写上规定clss. 然后js方法初始化一下。
注意点：页面中，如果出现postion等定位样式，可以会影响插件的百分布局的样式，造成奇怪的页面。

完整代码如下：demo

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./jquery.mCustomScrollbar-3.0.9.css">
    <script src="./jquery-1.8.3.min.js"></script>
    <script src="./jquery.mCustomScrollbar-3.0.9.js"></script>
    <style>
        ul {
            border: 1px black solid;
            height: 300px;
        }
        li {
            width: 300px;
            height: 50px;
            background: pink;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <div>
        <ul id="ul" class="mCustomScrollbar" data-mcs-theme="dark">
            <li></li>
            <li></li>
            <li></li>
            
            **********
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
</body>

<script>
    $("#ul").mCustomScrollbar({
        theme: "menu-list"
    });
</script>

</html>