在 Bootstrap 选项卡中操作 Nicescroll 滚动条 [英] Operlapping Nicescroll scrolbars in Bootstrap tabs

问题描述

我正在使用 Nicescroll 在引导选项卡上显示滚动条.

I'm using Nicescroll to display scrollbars on bootstrap tabs.

虽然它显示滚动条，但如果我们在多个选项卡上初始化 nicescroll，非活动选项卡的滚动条也始终可见.

While it displays the scrollbars, if we initialize nicescroll on multiple tabs, the scroller from non-active tabs are also visible at all times.

这个小提琴是对这个问题的再现:http://jsfiddle.net/LittleLebowski/B86me/15/这是代码:HTML 代码

This fiddle is a recreation of the issue: http://jsfiddle.net/LittleLebowski/B86me/15/ Here's the code: HTML code

<!-- 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>

JS 代码

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

如何仅在活动选项卡上显示滚动条.

How can I show scrollbars only on the active tabs.

请指导我.:(

推荐答案

我已经用这段代码在我的网站上解决了这个问题.

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>

这篇关于在 Bootstrap 选项卡中操作 Nicescroll 滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！