javascript - vertical - Desplazamiento de las barras de desplazamiento de Nicescroll en las pestañas de Bootstrap

scroll html bootstrap

Question

Estoy usando Nicescroll para mostrar las barras de desplazamiento en las pestañas de arranque.

Mientras muestra las barras de desplazamiento, si inicializamos nicescroll en varias pestañas, el desplazamiento de las pestañas no activas también estará visible en todo momento.

Este violín es una recreación del problema: http://jsfiddle.net/LittleLebowski/B86me/15/ Aquí está el código: código HTML

<!-- Nav tabs -->
<ul class="nav nav-tabs">
  <li><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home">
      <div class="scroller" data-height="150px">
          <p>Tight pants next level keffiyeh you probably haven''t heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney''s fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambra</p><br><br><p>y. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney''s cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim singl</p><br><br><p>e-origin coffee viral.
          </p></div>
    </div>

  <div class="tab-pane" id="profile">
       <div class="scroller" data-height="150px">
           <p>In July 1978, Post-Newsweek exchanged WTOP-TV with the Evening News Association''s WWJ-TV (now WDIV-TV) in Detroit. Upon completion of the swap, WTOP-TV changed its ca</p><br><br><p>ll letters to WDVM-TV, with the new call letters representing the initials of the areas which channel 9 serves: District of Columbia, Virginia and Maryland. Post-Newsweek parent The Washington Post Company, and the Evening News Association, which publi</p><p>shed the Detroit News, decided to swap their stations for fear that the FCC would force them to sell the stations at unfavorable terms or revoke their very valuable </p><br><br><p>licenses because the FCC at the time was considering forbidding ownership of newspapers and broadcast stations in the same market</p>
      </div>
      </div>
</div>

Código JS

$(document).ready(
    function() {
        $(''.scroller'').each(function () {
            $(this).height($(this).attr("data-height"));
            $(this).niceScroll({
                cursorwidth: ''7px'',
                cursorcolor: ''#A1B2BD'',
                cursoropacitymax: 0.6,
                autohidemode: false 
            });
        });
    }
  );

¿Cómo puedo mostrar las barras de desplazamiento solo en las pestañas activas?

Amablemente guíame :(

Answer 1

Con Bootstrap 3 pestañas

Marcado HTML

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
  <li role="presentation"><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
  <li role="presentation"><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
  <li role="presentation"><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="home">...</div>
  <div role="tabpanel" class="tab-pane" id="profile">...</div>
  <div role="tabpanel" class="tab-pane" id="messages">...</div>
  <div role="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>

Answer 2

He resuelto este problema en mi sitio con este código. pero ¿cómo puedo usar este código como un complemento, porque tengo un problema en todas mis páginas web?

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

Answer 3

He resuelto este problema en mi sitio con este código.

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>