jScrollPane滚动条问题

我正在使用Wordpress作为CMS的网站上工作，我想在我的网站上使用div内的自定义滚动条。 我一直在尝试使用jScrollPane插件，但是我无法使用它。

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

 .scroll-pane { width: 100%; height: 280px; overflow: auto; }  <script src="/js/jquery-1.3.2.min.js"> <link type="text/css" href="/style/jquery.jscrollpane.css" rel="stylesheet" media="all" /> <script type="text/javascript" src="/js/jquery.mousewheel.js"> <script type="text/javascript" src="/js/jquery.jscrollpane.min.js">  var $j = jQuery.noConflict(); $j(document).ready(function() { $('.scroll-pane').jScrollPane({showArrows: true}); });  

page.php文件：

 
 
 
 WP loop goes here 
 CSS: .newsBox{height:280px; overflow: auto;} 

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

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

我认为问题在于函数，所以我尝试了各种post和论坛的一些建议，包括：

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

Answer 3

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

然后尝试使用Chrome开发者工具，然后使用资源标签，然后您将看到Web实际加载的JS文件。

你可以在我的博客上看到关于那些滚动条的好post： jQuery Scrollbars

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

如果它仍然不起作用，jScrollPane会在jQuery之前加载。 要修复这个，请尝试以下方法：

先动一下吧

在 Closing标签之后结束。

如果仍然无效，请尝试使用文档准备好时

它必须工作:)

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

和

 
 
Smooth
 
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.
 
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.
  

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

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