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

我收到以下错误（被萤火虫捕获）：

" $(".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 中指定宽度和高度；即。

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

Answer 3

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

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

尝试使用 Chrome 开发者工具，然后使用资源选项卡，然后您将看到网络实际加载了哪些 JS 文件。

您可以在我的博客上看到一篇关于这些滚动条的精彩帖子： jQuery Scrollbars

也像@kingjiv 所说，你使用冲突然后'$'。 尝试删除他的冲突并仅使用：

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

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

先动你的

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

到</body> 结束标记之后。

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

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

它必须工作:)

Answer 4

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

然后我遇到了Wordpress 的这个插件，名为：WP jScrollPane。
我下载并安装了它。按照说明操作，自定义的scrollbar 出现了。

所以对我来说，这实际上是一个非常简单的解决方案。我太喜欢那个脚本了，我完全忘记了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。我喜欢它。