实现JQuery Scrollbox-修改函数-不确定如何实现

Implementing JQuery Scrollbox - amending the function - not sure how to do it

本文关键字：实现 何实现 JQuery Scrollbox- 修改 函数 不确定      更新时间：2023-09-26

我正在处理一个博客，我想在主内容区域的div框中放置一个JQuery滚动条。我是JS的新手，但我想我错过了一些东西。开发人员提供了一个脚本，但我认为它不正确。只是附带说明：所有的库都是在脚本之前加载的，所以我不认为这是问题所在

<!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和其他信息以确保.内容没有在其他地方引用。

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

现在firebug给我这个错误：

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

我觉得萤火虫说得比我说的好。我没有看到这里定义的函数。如果必须包含它，我不太确定函数会是什么。

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

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

这听起来像你所说的插件，包括那里的脚本参考：http://manos.malihu.gr/jquery-custom-content-scroller/

我想明白了。只要有人想知道：

我通过对演示脚本进行反向操作并弄清楚它来做到这一点。基本上我没有做的是把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>

那是我丢失的钥匙。

相关文章：