jQuery選項卡禁用jQuery滾動

我使用jqueryUI選項卡並希望在每個選項卡內實現平滑滾動條。我試了滾動插件如jQuery的自定義內容滾動，TinyScrollbar現在areaaperta NiceScroll，但每次我疊着同樣的問題 - 滾動條僅適用裏面一個標籤..jQuery選項卡禁用jQuery滾動

<script> 
    $(function() { 
     $("#tabs").tabs(); 
    }); 
    </script> 

    <div id="tabs" style="width:900px; font-size:100%;"> 
    <ul> 
     <li><a href="#tabs-1" >FIRST</a></li> 
     <li><a href="#tabs-2">SECOND</a></li> 
     <li><a href="#tabs-3">THIRD</a></li> 
    </ul> 
    <div id="tabs-1"> 
     <div id="thisdiv"> 
     <p><b>FIRST SCROLLABLE PARAGRAPH</b>...</p></div></div> 

    <div id="tabs-2"><div id="thisdiv2"> 
     <p><b>SECOND SCROLLABLE PARAGRAPH</b>...</p> 
    </div></div> 
    <div id="tabs-3"> 
     <p>THIRD TAB </p> 
    </div> 
</div> 

    <script> 
    $(document).ready(
    function() {  
    $("#thisdiv").niceScroll({cursorcolor:"#00F"}); 
    $("#thisdiv2").niceScroll({cursorcolor:"#00F"}); } 
); 
    </script>

這裏的jsfiddle，顯示有UItabs和niceScroll插件兩個滾動條之間沒有衝突：http://jsfiddle.net/Fluc/EhcqX/4/

在這裏，我試圖用與每個選項卡內滾動條相同的div：http://jsfiddle.net/Fluc/cJPT3/2/

正如你所看到的，滾動的作品只有第一個選項卡內..與其他可滾動插頭相同..

我不是jquery程序員，但感覺像問題是有關顯示屬性的地方。

任何幫助將不勝感激！

來源

2013-01-21 NullPointer

這是一個完美的嘗試，讓我知道。

<script> 
$(document).ready(function() { 
    $("#tabs").tabs(); 
    jQuery('#tabs').bind('tabsselect', function(event, ui) {  
     ui.tab 
     ui.panel 
     ui.index 
     if (ui.index==0) { 
      $("#tabs-1 > .scrollable").niceScroll({cursorcolor:"#00F"}); 
     }else if (ui.index==1) { 
      $("#tabs-2 > .scrollable").niceScroll({cursorcolor:"#00F"}); 
     }else if (ui.index==2) { 
      $("#tabs-3 > .scrollable").niceScroll({cursorcolor:"#00F"}); 
     } 
    }); 
}); 
</script>

我也更新您的提琴http://jsfiddle.net/cJPT3/9/

來源

2013-01-21 14:28:51 Rizstien

這是工作，但與普通的滾動，而不是jQuery的！ – NullPointer

現在試試這個。我編輯了我的答案並檢查了它。這工作完美。 – Rizstien

謝謝，像魅力一樣工作;-) – NullPointer

jQuery選項卡禁用jQuery滾動

回答

相關問題