0

我正在处理一个博客，我想在我的 div 框中放置一个 JQuery 滚动条作为主要内容区域。我对 JS 有点陌生，但我想我错过了一些东西。开发人员提供了一个脚本，但我不相信它是正确的。附带说明：所有库都是在脚本之前加载的，所以我不认为这就是问题所在。这是我目前拥有的（减去所有 Sql 废话）：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="../css/Styles.css" rel="stylesheet" type="text/css" />
<link href="../css/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css">
</head>

<body>
<div class="BKlayer2">
    <img src="../Images/BKlayer2.png" />
        <div class="InnerContent1">
          <img src="../Images/innerContent1.png" />
</div>
        <div class="innerContent2">
            <img src="../Images/innerContent2.png" />
    </div>
        <div class="Feedback">
          <img src="../Images/Feedblockbk.png" />
    </div>

<div id="blog_Posts">
<?php do { ?> Updated on: <?php echo $row_displayBehaviors['formatted']; ?><br />
      <br />
  <?php echo $row_displayBehaviors['title']; ?>
      <br />
      <br />
      <?php echo $row_displayBehaviors['blog_entry']; ?>
      <p>&nbsp;</p>
    <?php } while ($row_displayBehaviors = mysql_fetch_assoc($displayBehaviors)); ?>
</div>
<?php
mysql_free_result($getArchives);

mysql_free_result($displayBehaviors);
?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.mCustomScrollbar.concat.min.js"></script>
<script>
    (function($){
        $(window).load(function(){
            $(".blog_Posts").mCustomScrollbar();
                theme:"light"
        });
    })(jQuery);
</script>
</body>
</html>

我将 .content 更改为 .blog_Posts 因为这也是我尝试应用的 div 框。我检查了所有其他 css 和其他信息，以确保 .content 没有在其他任何地方引用。

将脚本和所有其他相关信息上传到我的服务器后，我检查了 firebug 以找出问题所在。

现在萤火虫给了我这个错误：

    TypeError: $(...).mCustomScrollbar is not a function
[Break On This Error]   

$(".blog_Posts").mCustomScrollbar();

我认为萤火虫说得比我好。我没有看到这里定义的函数。如果必须包含该功能，我不确定该功能是什么。

4

2 回答 2

0

我想到了。如果有人想知道：

我通过在演示脚本上向后工作并弄清楚它来做到这一点。基本上我没有做的是排列 CSS 并且我也没有正确目录中的脚本。

至于正确的脚本：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/minified/jquery-1.9.1.min.js"%3E%3C/script%3E'))</script>
<!-- custom scrollbars plugin -->
<script src="jquery.mCustomScrollbar.concat.min.js"></script>
<script>
(function($){
$(window).load(function(){
$(".body,.content").mCustomScrollbar({
scrollButtons:{
enable:true
}
});
});
})(jQuery);
</script>

基本上我在 .body 中添加并更改了 .content ，因此它对应于我的主要样式表。除了这个，你真的不需要页面上的任何 CSS：

<style>
body>.mCustomScrollBox>.mCSB_scrollTools{top:2%; height:96%;}
</style>

那是我丢失的关键。

于 2013-08-07T17:19:36.670 回答
0

在我看来，您没有包含 jQuery 插件脚本。

mCustomScrollbar不是 jQuery 的一部分，您需要引用该插件。

这听起来像您正在谈论的插件，包括那里的脚本参考：http: //manos.malihu.gr/jquery-custom-content-scroller/

于 2013-08-07T15:12:00.123 回答