堆栈内存溢出
  繁体   English   中英

jQuery自定义内容滚动条不起作用

[英]jQuery custom content scroller not working

 原文  2016-02-03 21:58:04  6   4    javascript/ jquery

问题描述

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>

4 个解决方案

解决方案1
 1 已采纳  2016-02-03 22:50:20

我设法使它起作用。 在CODEPEN中查看一个工作示例。

为了使其正常工作，我必须做两件事。 首先，我必须将带有滚动条的元素body_content在此示例中）放入container div中。 其次，我不得不将overflow更改为hidden在container div和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 。 另外，您可以使用插件中定义的变量来执行此操作。

解决方案2
 0  2016-02-03 22:15:38

尝试这个 

<!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

解决方案3
 0  2016-02-03 22:58:56

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

 <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>

解决方案4
 -1  2016-02-03 22:10:08

确保脚本文件位于正确的文件夹中。 我将它们更改为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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 jQuery 自定义内容滚动条 jQuery自定义内容滚动器插件 带有jQuery自定义内容滚动条的Bootstrap jQuery自定义内容滚动器无法在Bootstrap Table上响应 jQuery自定义内容滚动条遍历的路径样式:) jQuery自定义内容滚动条中的向上箭头 jQuery自定义内容滚动条-触发scrollTop事件 React.js：使用React.js的jQuery自定义内容滚动条 ajax调用后的jQuery自定义内容滚动条 jQuery自定义内容滚动器：删除鼠标滚动
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM