Вкладки Jquery с прокруткой на каждой вкладке

Я использую вкладки jqueryUI и хочу реализовать плавную полосу прокрутки внутри каждой вкладки. Я попробовал несколько прокручиваемых плагинов, таких как скроллер пользовательского контента jQuery, TinyScrollbar и теперь Areaaperta NiceScroll, но каждый раз, когда я складываю одну и ту же проблему - полоса прокрутки работает только внутри одной вкладки.

    <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, но мне кажется, что проблема где-то связана с свойством отображения.

Любая помощь будет очень признательна!


person user1808700    schedule 09.11.2012    source источник
comment
Просто взгляните на расширенные вкладки пользовательского интерфейса jquery, упомянутые в сообщении stackoverflow.com/a/45259166/2952405.   -  person David Chelliah    schedule 25.07.2017