当我按照他们教程中的所有说明进行操作时，为啥这个 JQuery-Custom-Content-Scroller 对我不起作用？
Posted
技术标签:
【中文标题】当我按照他们教程中的所有说明进行操作时，为啥这个 JQuery-Custom-Content-Scroller 对我不起作用？【英文标题】：Why doesn't this JQuery-Custom-Content-Scroller work for me when I have followed all instructions in their tutorial?当我按照他们教程中的所有说明进行操作时，为什么这个 JQuery-Custom-Content-Scroller 对我不起作用？ 【发布时间】：2015-09-15 05:32:50 【问题描述】：Find the JSFiddle here.
我正在尝试使用malihu JQuery Custom Scrollbar 插件，并且我已按照以下要求和步骤（至少我认为是这样），但它似乎对我不起作用。我如何让它发挥作用？
提取 jquery.mCustomScrollbar.concat.min.js、jquery.mCustomScrollbar.css 和 mCSB_buttons.png 并将其上传到您的 Web 服务器
我这样做了，只是交叉检查了。
在 html 文档的 head 标签中包含 jquery.mCustomScrollbar.css...在 head 标签中包含 jQuery 库...和 jquery.mCustomScrollbar.concat.min.js...
我做到了。
您要添加滚动条的元素应该具有典型的 溢出块的 CSS 属性，它们是高度（或 max-height) 值，自动（或隐藏）和内容的溢出值 足够长，需要滚动。
我应用滚动条的元素是.content-text，它出现了两次。它有height: 100%; overflow: auto;，还有一堆正常滚动条出现的文本。
文件包含后，在元素上调用 mCustomScrollbar 函数 要添加滚动条的选择器。
我首先添加了script 并更改了script.js 中的选择器这给了我一堆JSLint 错误。因此，我尝试将脚本添加到正文标记之前的文档末尾，正如您在代码中看到的那样。但没有收获！
将类 mCustomScrollbar 添加到您要添加自定义的任何元素 带有默认选项的滚动条。
我将mCustomScrollbar 添加到.content-text 元素中，您可以在代码中看到。
代码：
(function($)
$(window).load(function()
$("content-text").mCustomScrollbar(
theme:"minimal"
);
);
)(jQuery);
/*
Produces the following JSLint errors:
11 Expected exactly one space between 'function' and '('. (function($)
11 Expected exactly one space between ')' and ''. (function($)
11 Missing space between ')' and ''. (function($)
12 Missing 'use strict' statement. $(window).load(function()
12 Expected exactly one space between 'function' and '('. $(window).load(function()
12 Expected exactly one space between ')' and ''. $(window).load(function()
12 Missing space between ')' and ''. $(window).load(function()
15 Missing space between ':' and 'minimal'. theme:"minimal"
19 Move the invocation into the parens that contain the function. )(jQuery);
19 'jQuery' was used before it was defined. )(jQuery);
*/.wrapper
height:100%;
width: 95%;
margin: 10px auto;
display: table;
background-color:teal;
.cell
display:table-cell;
vertical-align: top;
.left-cell
width:50%
.middle-cell
height:100%;
background-color: white;
width:1.5px;
font-size: 0;
box-shadow: 0px 50px 10px black;
-moz-box-shadow: 0px 50px 10px black;
-webkit-box-shadow: 0px 50px 10px black;
.right-cell
/* width:50%*/ /*Commenting b/c both right and left 50, 50 squish and vanish the middle between them*/
background-color: blueviolet
.step-container
max-height: 200px;
font-size: 0;
.right-cell .step-container
margin-top:100px;
.content-box
display: inline-block;
width: 170px;
height: 200px;
/*border: 5px solid blue;*/
font-size: 0;
.content-box .content-image
width:35%;
height:100%;
background-size: cover;
display: inline-block
.content-box .content-text
background-color: rgb(255, 255, 255);
color: #1c1a1a;
font-family: sans-serif;
font-size: 15px;
font-weight: 100;
overflow:auto;
display: inline-block;
width:65%;
height:100%;
.notch-outer-container
display:inline-block;
.left-cell .notch-outer-container
margin-right: 3px;
.right-cell .notch-outer-container
margin-left: 3px;
.notch-inner-container
height:200px;
display:flex;
flex-direction: column;
justify-content: center;
.notch
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
.right-face-notch
border-left: 15px solid brown;
.left-face-notch
border-right: 15px solid brown;
.number-outer-container
display:inline-block;
position:absolute;
.left-cell .number-outer-container
left:47.5%;
.right-cell .number-outer-container
right:48%;
.number-inner-container
height:200px;
display:flex;
flex-direction: column;
justify-content: center;
.number-banner
width:30px;
height:30px;
background-color:crimson;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
.right-cell .number-outer-container
/*display: none;*/
<link href="http://malihu.github.io/custom-scrollbar/jquery.mCustomScrollbar.min.css" rel="stylesheet"/>
<script src="http://malihu.github.io/custom-scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- NOTE: THE INSTRUCTIONS AT http://manos.malihu.gr/jquery-custom-content-scroller/#expand-info DO INSTRUCT TO ALSO LOAD THE IMAGE AT "//malihu.github.io/custom-scrollbar/mCSB_buttons.png" BUT THIS SO TOOL DOES NOT LET ME LINK TO AN EXTERNAL IMAGE.
i HAVE ADDED THAT IN THE JSFiddle I HAVE LINKED IN THE QUESTION. SO CHECK THAT-->
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" href="jquery.mCustomScrollbar.css" />
<script src="javascript/jquery.mCustomScrollbar.concat.min.js"></script>
</head>
<body>
<div class="wrapper" >
<div class="left-cell cell" align="left">
<div class="step-container">
<div class="content-box">
<div class="content-image" style="background-image: url(http://simeonhookphotography.com/wp-content/gallery/favorites/norway-countryside-to-bergen.jpg);"></div>
<div class="content-text mCustomScrollbar"
><h6>What is Lorem Ipsum</h6><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div>
</div>
<div class="notch-outer-container">
<div class="notch-inner-container">
<div class="right-face-notch notch"></div>
</div>
</div>
<div class="number-outer-container">
<div class="number-inner-container">
<div class="number-banner"></div>
</div>
</div>
</div>
</div>
<div class="middle-cell cell"></div>
<div class="right-cell cell" align="right" >
<div class="step-container">
<div class="number-outer-container">
<div class="number-inner-container">
<div class="number-banner"></div>
</div>
</div>
<div class="notch-outer-container">
<div class="notch-inner-container">
<div class="left-face-notch notch"></div>
</div>
</div>
<div class="content-box">
<div class="content-text mCustomScrollbar"><h6>What is Lorem Ipsum</h6><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div>
<div class="content-image" style="background-image:url(http://www.penttila-gardens.com/activities/walking/countryside/images/02-harvest.jpg)">
</div>
</div>
</div>
</div>
</div>
<script>
(function($)
$(window).load(function()
$("content-text").mCustomScrollbar(
theme:"minimal"
);
);
)(jQuery);
</script>
</body>
</html>编辑：
在关闭<body> 标签之前，我在文档末尾添加了以下内容：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="javascript/jquery-2.1.3.js"><\/script>')</script>
<!-- custom scrollbar plugin -->
<script src="../jquery.mCustomScrollbar.concat.min.js"></script>
<script>
(function($)
$(window).load(function()
$("content-text").mCustomScrollbar(
theme:"minimal"
);
);
)(jQuery);
</script>
但在 Chrome 中仍然出现以下错误：
并且滚动条不会出现在 Firefox 中。
【问题讨论】：
你为什么加载 Jquery edge -- 当你使用 Jquery v1.11 时看起来不错 -- jsfiddle.net/tfaf78xd @Tasos 我的本地服务器上有 JQuery 2.1.3，但没有在那里工作。当我创建这个 JSFiddle 时，我单击了 Edge，因为我认为这是最新的。无论如何，这似乎有效，所以如果你可以将其作为答案发布，我可以接受。 @Tasos 嘿，不，滚动条没有在那里滚动。你知道为什么吗？？ 您使用的是什么浏览器。 chrome，IE滚动条都ok @Tasos 火狐。我需要它至少可以在 Firefox 和 Chrome 上工作 =( 【参考方案1】：我不认为你正在加载 jquery。 github存储库中有很多示例，您可以从那里开始。
看看这个：https://github.com/malihu/malihu-custom-scrollbar-plugin/blob/master/examples/callbacks_example.html#L89
<!-- Google CDN jQuery with fallback to local -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../js/minified/jquery-1.11.0.min.js"><\/script>')</script>
【讨论】：
请查看问题中的编辑。我确实添加了这些，但它还没有工作。【参考方案2】：为高度设置一个特定值，即将 100% 更改为 600 像素；
.content-box .content-text
background-color: rgb(255, 255, 255);
color: #1c1a1a;
font-family: sans-serif;
font-size: 15px;
font-weight: 100;
overflow:auto;
display: inline-block;
width:65%;
height:100%; //assign a particular value to the height, say 600px;
【讨论】：
以上是关于当我按照他们教程中的所有说明进行操作时，为啥这个 JQuery-Custom-Content-Scroller 对我不起作用？的主要内容，如果未能解决你的问题，请参考以下文章
为啥我在 codeigniter 中的分页不起作用？ （404 未找到）