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中指定宽度和高度;即

<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，只有litte css和html。我喜欢它。

jScrollPane滚动条问题

5 个答案: