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

问题描述

我正在使用 Nicescroll 在引导标签上显示滚动条。

当它显示滚动条时，如果我们在多个选项卡上初始化nicescroll，则非活动选项卡中的滚动条也始终可见。

<这个小提琴是一个重新解决问题的方法： http://jsfiddle.net/LittleLebowski/B86me/15 /
以下是代码：
HTML代码

  <！ - 导航标签 - > 
< ul class =nav nav-tabs> 
< li>< a href =＃homedata-toggle =tab>主页< / a>< / li> 
< li>< a href =＃profiledata-toggle =tab>个人资料< / a>< / li> 
< / ul> 
 
<！ -  Tab panes  - > 
< div class =tab-content> 
< div class =tab-pane activeid =home> 
< div class =scrollerdata-height =150px> 
< p>紧身裤下一级keffiyeh你可能还没有听说过它们。照片展位胡子生牛仔布凸版素食主义者斜挎包stumptown。农场到餐桌seitan，mcsweeney的fixie可持续藜麦8位美国服装有毛圈richardson乙烯基chambra< br>< br>< p> y。胡子stumptown，开襟羊毛banl mi lomo thundercats。豆腐生物柴油威廉斯堡marfa，四个loko mcsweeney的清洁素食主义者青年布。一个非常具有讽刺意味的工匠，无论是什么样的关键字，一个农场到餐桌的银行家Austin twitter处理freegan cred raw denim singl< br>< br>< p> e-origin coffee病毒。 
< / p>< / div> 
< / div> 
 
< div class =tab-paneid =profile> 
< div class =scrollerdata-height =150px> 
< p> 1978年7月，Post-Newsweek与底特律的晚间新闻协会的WWJ-TV（现为WDIV-TV）交换了WTOP-TV。交换完成后，WTOP-TV将其< />< br>< br>< p> ll字母更改为WDVM-TV，新的来电代表第9频道所用区域的首字母：哥伦比亚特区，弗吉尼亚州和马里兰州后新闻周刊的父母华盛顿邮报公司和晚间新闻协会，由于担心美国联邦通信委员会将迫使他们以不利的条件出售这些电台，所以该公司决定更换他们的电台。或撤销其非常有价值的< / p>< br>< br>< p>许可证，因为当时的FCC正在考虑禁止在同一市场中的报纸和广播电台的所有权< / 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 
}）; 
}）; 
} 
）; 
  

如何仅在活动标签上显示滚动条。

请指导我。 :(

解决方案

我已使用此代码在我的网站上解决了这个问题。

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（$（这个）.attr（'aria-controls'）=='profile'）{
 $（this）.closest（'。panel'）。find（'。panel-body'）。getNiceScroll（）。show （）; 
} else {
 $（this）.closest（'。panel'）。find（'。panel-body'）。getNiceScroll（）。hide（）; 
} 
}）
}）; 
< / script> 
  

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 also visible at all times.

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 code

$(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.

Kindly guide me. :(

解决方案

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选项卡中Operlapping Nicescroll滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！