2011-04-24 206 views
3

我正在使用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}); }); 

我已經檢查了所有我引用到外部文件並確保類被命名一樣,他們都似乎是正確的。而且我有一位精通代碼的朋友也看了一下,無濟於事。

我真的很感謝你的幫忙!

+0

該代碼正在用於本網站:http://www.maxxberkowitz.com/buzzkill-dev/?page_id=209 – Maxx 2011-04-25 01:31:00

+0

我目前有這個問題。找到任何解決方案? – 2016-04-04 09:33:49

回答

3

也許我在這裏錯過了一些東西,從來沒有使用jscrollpane,但我沒有看到你包括jquery本身。你也可以調用noconflict,然後在你的函數中使用$。

+0

我的代碼中有更高的jquery調用,我只是忘了在這裏包含它。 我刪除了$現在我得到以下錯誤: 遺漏的類型錯誤:對象.scroll窗格沒有方法 'JScrollPane的' (匿名函數)/ buzzkill-dev /目錄PAGE_ID = 209:123 c.extend .ready – Maxx 2011-04-25 00:56:23

+0

你試過'$ j('。scroll-pane')。jScrollPane({showArrows:true});'?你將jquery重新定義爲$ j,所以你應該使用$ j而不是$。 – 2011-04-25 01:07:11

+0

是的,我做了,我剛剛嘗試了兩個版本: 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

0

我沒看到你包含最新的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> 

必須工作:)

+0

這段代碼是我最初使用的(但是再次嘗試過),我調用的所有東西似乎都在資源管理器中加載,而較新的jQuery沒有改變任何東西。我檢查了你的帖子,我很確定我做了同樣的事情。如果它可以幫助你可以看看這個網站在http://www.maxxberkowitz.com/buzzkill-dev/?page_id=209 – Maxx 2011-04-25 01:30:36

+0

@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。我喜歡它。