jScrollPane滚动条问题

Question

我正在开发一个使用 Wordpress 作为 CMS 的网站，并且我想在我的网站的 div 内使用自定义滚动条。我一直在尝试使用 jScrollPane 插件，但无法使其正常工作。

主要代码在我的 header.php 文件中，并且有一个类 .scroll-pane header.php 中的相关代码是：

 <style type="text/css" id="page-css"> 
            .scroll-pane
                {
                    width: 100%;
                    height: 280px;
                    overflow: auto;
                }
        </style>
    <script src="<?php bloginfo('template_url'); ?>/js/jquery-1.3.2.min.js"></script>
    <link type="text/css" href="<?php bloginfo(template_url); ?>/style/jquery.jscrollpane.css" rel="stylesheet" media="all" />
    <script type="text/javascript" src="<?php bloginfo(template_url); ?>/js/jquery.mousewheel.js"></script>
    <script type="text/javascript" src="<?php bloginfo(template_url); ?>/js/jquery.jscrollpane.min.js"></script>

        <script type="text/javascript"> 
            var $j = jQuery.noConflict();
            $j(document).ready(function()
            {   
                $('.scroll-pane').jScrollPane({showArrows: true});
            });
        </script> 

page.php:

< div id="sign-right">

< div class="newsBox-padding">

< div class="scroll-pane newsBox"> WP loop goes here </div></div>


CSS:
.newsBox{height:280px; overflow: auto;}

我收到以下错误（被 firebug 捕获）：

" $(".scroll-pane").jScrollPane is not a function
$('.scroll-pane').jScrollPane({showArrows: true}); "

我认为问题出在因此我尝试了来自各种帖子和论坛的一系列建议，包括：

$function(){ jQuery('.scroll-pane').jScrollPane({showArrows: true});

$function(){ $('.scroll-pane').jScrollPane({showArrows: true}); });

我检查了所有对外部文件的引用，并确保类的名称相同，它们似乎都是正确的。我也有一个精通代码的朋友看过它，但无济于事。

我真的很感谢你的帮助！

Answer 1

也许我在这里遗漏了一些东西，从未使用过 jscrollpane，但我没有看到你包括 jquery 本身。此外，您还可以调用 noconflict ，然后仍然在函数中使用 $ 。

Answer 2

我遇到这个问题是因为我加载了两次jquery。

Scrollpane 在以下情况下使用确实效果很好：

$(document).ready(function () {
    $('.scroll-pane').jScrollPane();
 });

另外，不要忘记在您应用的 div 中指定宽度和高度； IE。

<div class="scroll-pane" style="width: 200px; height: 100px;"></div>

Answer 3

我没有看到您包含最新的 jQuery，请尝试添加它。
要使用 google 主机添加最新的 jQuery：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" />

并尝试使用 Chrome 开发人员工具，然后使用资源选项卡，然后您将看到网络实际加载的 JS 文件。

你可以在我的博客上看到一篇关于这些滚动条的好文章： jQuery Scrollbars

同样像@kingjiv 所说，你使用 Conflict 然后使用 '$'。
尝试消除冲突并仅使用：

<script type="text/javascript"> $(function () {
  $('.scroll-pane').jScrollPane();
 });
<script> 

如果仍然不起作用，则 jScrollPane 会在 jQuery 之前加载。
要解决此问题，请尝试以下方法：

首先将您的 移动

<script type="text/javascript"> $(function () {
  $('.scroll-pane').jScrollPane();
 });
<script> 

到 结束标记之后的末尾。

如果仍然不起作用，请尝试使用当文档准备好时

<script type="text/javascript">
    $(document).ready(function () {
        $('.scroll-pane').jScrollPane();
    });
<script>

它必须起作用:)

Answer 4

我遇到了同样的问题，花了很长时间才解决。我只是找不到任何解决方案。

然后我遇到了这个 Wordpress 插件，名为：WP jScrollPane。
我下载并安装了它。按照说明进行操作，就会出现自定义滚动条。

所以对我来说这实际上是一个非常简单的解决方案。我太喜欢那个脚本了，以至于我完全忘记了 Wordpress 也有自己的插件。

无论如何，我不知道这对你是否有用，但它对我帮助很大。

Answer 5

我厌倦了这个插件的问题。我工作了一天才让它运行起来。我发现它需要：

http://code.jquery.com/jquery-migrate-1.2.0.min.js

... 文件才能正常运行。所以它是一个老插件并且支持不是很好。

我对我的问题有一个非常简单的解决方案:)：

div.scrollBar {
  width: 200px;
  height: 200px;
  overflow-y: scroll; /* has to be scroll, not auto */
  -webkit-overflow-scrolling: touch;
}

这

<div class="scrollBar">
<h3>Smooth</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>

是工作示例：
http://jsfiddle.net/ghdcmsxx/

太棒了：D。它甚至针对触摸进行了优化。
哇。没有 jquery，只有很少的 css 和 html。我喜欢它。