jScrollPane滚动条问题

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

主要代码是在我的header.php文件，并且还有一类.scroll窗格中的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}); "

我认为这个问题是在功能，所以我已经尝试了一堆sugge的从各个岗位和论坛stions包括：

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

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

我已经检查了所有我引用到外部文件并确保类被命名一样，他们都似乎是正确的。而且我有一位精通代码的朋友也看了一下，无济于事。

我真的很感谢你的帮忙！

来源

2011-04-24 Maxx

该代码正在用于本网站：http://www.maxxberkowitz.com/buzzkill-dev/?page_id=209 – Maxx 2011-04-25 01:31:00

我目前有这个问题。找到任何解决方案？ – 2016-04-04 09:33:49

也许我在这里错过了一些东西，从来没有使用jscrollpane，但我没有看到你包括jquery本身。你也可以调用noconflict，然后在你的函数中使用$。

来源

2011-04-24 23:10:01

我的代码中有更高的jquery调用，我只是忘了在这里包含它。我删除了$现在我得到以下错误：遗漏的类型错误：对象.scroll窗格没有方法 'JScrollPane的' （匿名函数）/ buzzkill-dev /目录PAGE_ID = 209：123 c.extend .ready – Maxx 2011-04-25 00:56:23

你试过'$ j（'。scroll-pane'）。jScrollPane（{showArrows：true}）;'？你将jquery重新定义为$ j，所以你应该使用$ j而不是$。 – 2011-04-25 01:07:11

是的，我做了，我刚刚尝试了两个版本： var $ j = jQuery.noConflict（）; \t \t \t $Ĵ（函数（） \t \t \t \t { \t \t \t \t（ '.scroll窗格'）JScrollPane的（{showArrows：真}）; \t \t \t。}）; 和： var $ j = jQuery。noConflict（）; \t \t \t $Ĵ（函数（） \t \t \t \t { \t \t \t \t $Ĵ（）JScrollPane的（{showArrows：真}）; \t \t \t '滚动窗格。'。}）; – Maxx 2011-04-25 01:22:21

我没看到你包含最新的jQuery，请尝试添加它。要使用谷歌主机添加了最新的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的prolly加载jQuery不会了。要解决这个问题尝试这些方法：

第一运动找你

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

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

如果仍然无法正常工作尝试使用当文档准备

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

必须工作:)

来源

2011-04-24 23:12:20 Danpe

这段代码是我最初使用的（但是再次尝试过），我调用的所有东西似乎都在资源管理器中加载，而较新的jQuery没有改变任何东西。我检查了你的帖子，我很确定我做了同样的事情。如果它可以帮助你可以看看这个网站在http://www.maxxberkowitz.com/buzzkill-dev/?page_id=209 – Maxx 2011-04-25 01:30:36

@Maxx看看这篇文章，我想我知道这个问题.. jQuery没有完成在调用$（function（）（）之前加载。移动此功能 '

-1

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

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/

That's很大：d。它甚至可以针对触摸进行优化。哇。没有jquery，只有litte css和html。我喜欢它。

来源

2015-07-21 17:06:51 Slowwie

jScrollPane滚动条问题

回答

相关问题