jQuery自定义内容滚动器不起作用答案

【问题标题】：jQuery custom content scroller not workingjQuery自定义内容滚动器不起作用
【发布时间】：2016-02-04 18:31:45
【问题描述】：

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>

【问题讨论】：

我猜你的自定义滚动条库的路径有问题。您是否尝试在滚动条 css 和 js 的路径前添加斜杠或点斜杠？
除了 Ece 写的内容之外，使用 div 将滚动条应用到，而不是正文。
似乎没有什么不同

标签： javascript jquery

【解决方案1】：

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

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

$(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。此外，您可以使用插件中定义的变量来执行此操作。

【讨论】：

为我工作感谢，有点奇怪，这一切都没有在官方网站上描述
这是一个非常不错的插件，跨平台，许多有用的主题和功能。但正如你所说，文档并不简单。
是的，它看起来真的很不错，但很遗憾，因为我查看了一些其他自定义滚动条插件，它们至少可以工作，但没有这个选项那么多的选项

【解决方案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

【讨论】：

不，还是不走运，顺便说一句，我不认为他们甚至会成为 css 中带有 html,body{height:100%;} 的滚动条
它适用于我，但您必须添加填满整个页面的内容，否则滚动条不会显示。
我在这里使用了代码manos.malihu.gr/tuts/custom-scrollbar-plugin/…

【解决方案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>

【讨论】：

当我自己运行它时，我确实看到了一些类似于滚动条的东西，但它不起作用，并且默认滚动条也仍然存在
对不起...我又更改了一次代码。运行示例。它现在应该可以工作了。问题是我将body wrapper的高度设置为2000px，但wrapper应该有100%的高度。虚拟pnow 有 2000px，例如现在自定义滚动条是可见的。
非常感谢您的帮助，在我看来，由于某种原因，滚动条出现的唯一时间是页面上的 div 足够大，而且原始滚动条似乎也需要隐。我不知道这是开发人员的疏忽还是我忽略了某些东西，但这是一个非常奇怪的实现，特别是因为插件页面上没有描述它。
我在外部小提琴中再次构建了它。 1）所有JavaScript文件都必须通过https在这里在js fiddle中加载，在你的HTML文件中你也可以使用http，因为你的页面没有在https下运行我认为2）首先加载jQuery，第二个jquery.mousewheel，第三个jquery.mCustomScrollbar @ 987654321@ - 我的示例现在也应该可以工作，我也很抱歉在这里我不得不引用所有脚本 https://

【解决方案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>

【讨论】：

这对你有用吗？因为该代码对我不起作用