Question

1。摘要

我想将默认浏览器滚动条替换为自定义滚动条。要求：

更换默认滚动条，不仅替换文本块中的滚动条;
跨浏览器;
能够指定自定义颜色以滚动条。

我只能为我的要求找到Mailhu Custom Scrollbar JQuery插件。但我无法自定义我的滚动条使用此插件。

2。最小代码示例

(function($) {
    $(window).load(function() {
        $("body").mCustomScrollbar({
            theme: "rounded"
        });
    });
})(jQuery);

完整代码：

<!DOCTYPE html>
<html lang="ru">

<head>
    <title>Test</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="http://manos.malihu.gr/tuts/custom-scrollbar-plugin/jquery.mCustomScrollbar.css">
    <style type="text/css">
    html,
    body {
        height: 100%;
    }

    body {
        margin: 0;
        color: #eee;
        background: #222;
    }
    </style>
</head>

<body>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio nesciunt eius quo placeat architecto mollitia aspernatur provident qui quidem consectetur ipsam, obcaecati necessitatibus repellat minus ab molestiae praesentium? Repellendus, deleniti!</div>
    <div>Recusandae architecto minus, incidunt magnam ipsam quas, quibusdam corporis ratione delectus nemo aperiam iure accusantium culpa est cum optio sint illum modi in vero. In rerum obcaecati nobis illum iste.</div>
    <div>Dolor, sunt ab! Veritatis dignissimos odit quod repudiandae voluptas consequatur, incidunt reiciendis dolorum aliquid, sapiente, assumenda quisquam. Exercitationem tempore possimus debitis, nesciunt at ipsum sequi consequatur ad atque, natus cupiditate.</div>
    <div>Nam obcaecati quae iure quos quidem, iusto, autem, corporis expedita quo nobis sit nisi sint nesciunt, voluptatum modi eligendi asperiores dicta laboriosam at ea! Voluptatibus rerum minus ut, ipsa minima.</div>
    <div>Repellendus reprehenderit harum similique error dolore ipsa quo vel ratione officia incidunt amet cum, temporibus corrupti explicabo tempora consequatur nostrum dolorum aliquam optio a, nemo, consequuntur earum? Autem, at, consequatur.</div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis rerum eveniet, ipsa soluta illo mollitia cumque dolorum adipisci sint, ad repellendus maiores incidunt eligendi tempora harum inventore aperiam ab. Sapiente?</div>
    <div>Unde alias ab facere deleniti doloremque dicta soluta minima eaque, qui quam, sint dolorem, iure debitis atque nam, repellendus fugiat! Quasi perspiciatis consequuntur adipisci nihil repudiandae impedit dolores amet ipsum.</div>
    <div>Atque ad eius voluptatibus id, perspiciatis, numquam quasi architecto commodi omnis. Ut nobis alias, minima quia, sit quibusdam voluptates iusto maiores vel rem ex id perspiciatis culpa voluptate doloribus sequi.</div>
    <div>Dignissimos fugit tempora qui, exercitationem assumenda quas et accusantium dolorem, cupiditate voluptates labore cumque animi officia quibusdam reprehenderit fugiat eveniet architecto, voluptatum reiciendis accusamus nobis nulla. Porro molestias nobis harum?</div>
    <div>Ipsa cum omnis, eum labore praesentium. Neque ipsum distinctio sapiente magnam error sequi. Atque quia, rerum temporibus fugit dicta cumque excepturi totam alias reiciendis quidem aliquid perferendis repudiandae, maiores magni.</div>
    <div>Sit labore libero sed facilis asperiores culpa corrupti nobis. Animi, amet veniam laboriosam, modi laudantium suscipit sed distinctio quas reprehenderit impedit doloremque quo in, aut quaerat sunt. Esse explicabo, assumenda?</div>
    <div>Nostrum, ut, quisquam. Modi, ipsum natus unde a dolorem laboriosam, amet deleniti et recusandae, necessitatibus nam temporibus ut aspernatur accusantium nostrum distinctio hic voluptas, quaerat. Doloribus ex aperiam possimus voluptas.</div>
    <div>Rem impedit dolore maiores nihil ex in similique delectus recusandae libero, earum odit a accusantium sapiente, natus nesciunt obcaecati accusamus molestiae iste ut. Minus ullam rerum, distinctio dolore expedita, nisi.</div>
    <div>Incidunt pariatur nisi laudantium laboriosam beatae voluptates officiis, officia accusamus harum. Asperiores accusantium, et placeat consequatur fugit vero! Velit tempora ratione fugiat libero expedita incidunt nobis eveniet temporibus distinctio blanditiis!</div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum atque distinctio doloremque, explicabo ex voluptatibus veritatis quibusdam a laboriosam ad impedit consequuntur aperiam amet perspiciatis totam illum illo natus modi!</div>
    <div>Consequatur distinctio, doloremque aliquam blanditiis aliquid dolor facilis explicabo tempore, iure molestiae eveniet maiores! Accusantium, beatae quis voluptate id deserunt voluptatem numquam unde illum ipsa cumque praesentium exercitationem earum fuga.</div>
    <div>Earum saepe velit, porro, pariatur tempore cumque obcaecati ad voluptatem assumenda iure, quo, magni nostrum. Quibusdam reiciendis molestiae ipsa commodi expedita est eius maiores delectus deserunt rerum, impedit nihil perspiciatis!</div>
    <div>Earum ex sapiente, voluptatum ipsum quis et incidunt consectetur quod dolore facere nihil, accusantium explicabo at aliquam vero voluptatibus officia sequi excepturi ipsam reiciendis possimus aliquid, cupiditate nostrum? Sequi, debitis.</div>
    <div>Quasi labore at eligendi expedita ratione, odio amet dolorem omnis maxime eos dolor doloribus, rem laboriosam odit voluptate ut aliquam, totam ipsa sequi illo! Repellendus delectus facilis dolorem, eum id.</div>
    <div>Enim error doloribus eius laudantium cum neque temporibus tenetur quas. Maiores, neque exercitationem laboriosam temporibus perspiciatis corporis qui atque quia rem dolorem, ad numquam facilis voluptates commodi accusantium voluptatibus, quidem!</div>
    <div>Quod accusamus delectus quis, culpa illo consequatur cupiditate quae error quaerat autem ducimus nihil nulla atque soluta nesciunt quia amet neque nam animi fugiat praesentium. Minima obcaecati optio illum facere.</div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://manos.malihu.gr/tuts/custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js"></script>
    <script>
    (function($) {
        $(window).load(function() {
            $("body").mCustomScrollbar({
                theme: "rounded"
            });
        });
    })(jQuery);
    </script>
</body>

</html>

默认滚动条成功替换我，但主题对我不起作用。

3。没帮忙

我尝试写另一个主题 - manos.malihu.gr/repository/custom-scrollbar/demo/examples/scrollbar_themes_demo.html - 而不是rounded，但我得到的结果相同。
我尝试在我的HTML文件中编写css properties for scroll bar，然后尝试创建自己的主题，但结果相同。

4。问题

我应该怎么做，为Mailhu Custom Scrollbar使用自定义主题？

Answer 1

manos.malihu.gr/tuts/的位置包含旧版本的js和css文件。您应该从插件主页中指定的链接和位置下载并使用插件文件：

插件发布档案： https://github.com/malihu/malihu-custom-scrollbar-plugin/releases

CDN： //cdn.jsdelivr.net/jquery.mcustomscrollbar/3.1.5/jquery.mCustomScrollbar.concat.min.js

malihu-custom-scrollbar-plugin的主题对我不起作用

1。摘要

2。最小代码示例

3。没帮忙

4。问题

1 个答案: