Question

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

我试图使用jquery自定义滚动条库，但它没有显示自定义滚动条。我不知道我做错了什么我没有得到任何错误，我认为我正确地修改了文件并按正确的顺序加载了所有内容。我真的可以使用这个

的帮助

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Huppit</title>

    <!--bootstrap-->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">

    <!--custom scrollbar-->
    <link href="scrollbar/jquery.mCustomScrollbar.min.css" rel="stylesheet" type="text/css">
</head>
<body style="height:2000px">
    <!--bootstrap and jquery-->
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <!--custom scrollbar-->
    <script src="scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
    <!--own scripts-->
    <script type="text/javascript">
        $("body").mCustomScrollbar();
    </script>
</body>
</html>

Answer 1

我设法让它发挥作用。查看CODEPEN中的工作示例。

为了让它发挥作用，我必须做两件事。首先，我必须将带有滚动条的元素body_content放在container div中。其次，我必须在overflow div和hidden上将container更改为body，以摆脱垂直滚动条的重复。

<强> JS

$(window).load(function(){
   $(".body_content").mCustomScrollbar({
       theme: "dark",
       scrollButtons: {enable:true}
   });
});

<强> CSS

body, .container {
   overflow: hidden;
}
.body_content {
   position: relative;
   max-height: 500px;
   background: #ddd;
}

顺便说一句，根据插件文档，您始终需要为水平滚动条设置width或max-width，为垂直滚动条设置height或max-height。此外，您可以使用插件中定义的变量来执行此操作。

Answer 2

试试这个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Huppit</title>

    <!--bootstrap-->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">

    <style>
    html,body{height:100%;}
    </style>

    <!--custom scrollbar-->
    <link href="https://cdn.jsdelivr.net/jquery.mcustomscrollbar/3.1.3/jquery.mCustomScrollbar.min.css" rel="stylesheet" type="text/css">
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <!--custom scrollbar-->
    <script src="https://cdn.jsdelivr.net/jquery.mcustomscrollbar/3.1.3/jquery.mCustomScrollbar.min.js"></script>
</head>
<body>

    <!--Add a lot of text here-->

    <script type="text/javascript">
        (function($){
            $(window).load(function(){
                $("body").mCustomScrollbar({
                    scrollButtons:{
                        enable:true
                    }
                });
            });
        })(jQuery);
    </script>
</body>
</html>

遵循此示例http://manos.malihu.gr/tuts/custom-scrollbar-plugin/full_page_demo.html

Answer 3

您可以在自己的网站上尝试以下代码：

<html>
<head>
    <title>Custom Scroller</title>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.js" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
    <script src="https://cdn.jsdelivr.net/jquery.mcustomscrollbar/3.1.3/jquery.mCustomScrollbar.js"></script>
    <link href="https://cdn.jsdelivr.net/jquery.mcustomscrollbar/3.1.3/jquery.mCustomScrollbar.min.css" rel="stylesheet" />
    <script type="text/javascript">
        $(document).ready(function() {
          $(".body-wrapper").mCustomScrollbar({
              theme: "inset-dark",
              scrollButtons: {enable:true}
          });
        });
    </script>
    <style type="text/css">
        body, html { height:100%; min-height:100%; }
        body { margin:0; }
        .body-wrapper { height:100%; background-color:#eee; overflow:hidden;}
    </style>
</head>
<body>
    <div class="body-wrapper">
        <h1>Custom Scroller</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </div>
</body>
</html>

Answer 4

确保您的脚本文件位于正确的文件夹中。我将它们更改为CDN链接，并将所有脚本放在<head></head>标记。

之间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Huppit</title>

    <!--bootstrap-->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">

    <!--custom scrollbar-->
    <link href="https://cdn.jsdelivr.net/jquery.mcustomscrollbar/3.1.3/jquery.mCustomScrollbar.min.css" rel="stylesheet" type="text/css">
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <!--custom scrollbar-->
    <script src="https://cdn.jsdelivr.net/jquery.mcustomscrollbar/3.1.3/jquery.mCustomScrollbar.min.js"></script>
</head>
<body style="height:2000px">

    <script type="text/javascript">
        $("body").mCustomScrollbar();
    </script>
</body>
</html>

jQuery自定义内容滚动条无法正常工作

4 个答案: