Operlapping Nicescroll Scrolbars In Bootstrap Tabs

I'm using Nicescroll to display scrollbars on bootstrap tabs. While it displays the scrollbars, if we initialize nicescroll on multiple tabs, the scroller from non-active tabs are

Solution 1:

With Bootstrap 3 Tabs

HTML Markup

<!-- Nav tabs --><ulclass="nav nav-tabs"role="tablist"><lirole="presentation"class="active"><ahref="#home"role="tab"data-toggle="tab">Home</a></li><lirole="presentation"><ahref="#profile"role="tab"data-toggle="tab">Profile</a></li><lirole="presentation"><ahref="#messages"role="tab"data-toggle="tab">Messages</a></li><lirole="presentation"><ahref="#settings"role="tab"data-toggle="tab">Settings</a></li></ul><!-- Tab panes --><divclass="tab-content"><divrole="tabpanel"class="tab-pane active"id="home">...</div><divrole="tabpanel"class="tab-pane"id="profile">...</div><divrole="tabpanel"class="tab-pane"id="messages">...</div><divrole="tabpanel"class="tab-pane"id="settings">...</div></div>

JS

<script>
  $(document).ready(function() {
      $('a[data-toggle="tab"]').click(function () {
          $("tab-pane").getNiceScroll().hide();

          $($(this).attr('href')).find("tab-pane").niceScroll({
              cursorcolor: "#2f6098",
              cursorwidth: 10,
              cursoropacitymin: 0.7
          });

          $($(this).attr('href')).find("tab-pane").getNiceScroll().show();
      })

      $('#home').find("tab-pane").niceScroll({
          cursorcolor: "#2f6098",
          cursorwidth: 10,
          cursoropacitymin: 0.7
      });
  });
</script>

Solution 2:

I've solved this issue on my site with this code.

JS

<script>
         $(document).ready(function() {
                $('a[data-toggle="tab"]').click(function () {
           $(this).closest('.panel').find('.panel-body').niceScroll({
                        cursorcolor: "#2f6098",
                        cursorwidth: 10,
                        cursoropacitymin: 0.7
                    });

           if($(this).attr('aria-controls') == 'profile'){
            $(this).closest('.panel').find('.panel-body').getNiceScroll().show();
           }else{
            $(this).closest('.panel').find('.panel-body').getNiceScroll().hide();
           }
                })
            });
    </script>

Solution 3:

I have solved this issue on my site with this code. but how can use this code as a plugin, bcoz i get issue in all my web pages.

 $('body').on('click','[data-toggle="tab"]',function(){
     $(".scroll").getNiceScroll().hide();
                  $($(this).attr('href')).find(".scroll").getNiceScroll().show();
 });