如何将滚动条添加到导航标签的内容？

Question

我使用重叠滚动条的lionbars滚动条插件，我想将滚动条应用于内容，但不幸的是它没有显示。以下是我的片段供参考，并帮助我解决问题。

$(document).ready(function(){ 
 
    $('#activity, #locations').lionbars({ 
 
    autohide: true 
 
    }); 
 
});

.right-sidebar-wrapper{ 
 
    position: absolute; 
 
    right: 0; 
 
    width: 24%; 
 
    top:0; 
 
    bottom: 0; 
 
    height: 100%; 
 
    background: #FFF; 
 
    box-shadow: 0 -1px 24px rgba(0,0,0,0.4); 
 
    z-index: 1; 
 
} 
 
#r-s-tab{ 
 
    display: inline-block; 
 
    height: 80%; 
 
    width: 100%; 
 
    margin-bottom: 10px; 
 
} 
 
#r-s-tab #activity a, #r-s-tab #locations a{ 
 
    padding-top: 8px; 
 
    border-radius: 3px; 
 
    display: block; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://bootswatch.com/bower_components/bootstrap/dist/js/bootstrap.min.js"></script> 
 
<link href="http://bootswatch.com/paper/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="http://charuru.github.io/lionbars/css/lionbars.css" rel="stylesheet"/> 
 
<script src="http://charuru.github.io/lionbars/js/jquery.lionbars.0.3.js"></script> 
 

 
<div class="right-sidebar-wrapper"> 
 
<div class="right-nav"> 
 
    <ul class="nav nav-tabs"> 
 
    <li class="active"><a href="#activity" class="text-center" data-toggle="tab"><!-- Featured Activities --><i class="fa fa-grav fa-2x"></i></a></li> 
 
    <li><a href="#locations" data-toggle="tab" class="text-center"><!-- Locations --><i class="fa fa-map fa-2x" aria-hidden="true"></i></a></li> 
 
    </ul> 
 
    <div id="r-s-tab" class="tab-content"> 
 
    <div class="tab-pane fade active in" id="activity"> \t \t 
 
     <div class="col-lg-12"> 
 
     <a href="#"><img src="http://placehold.it/350x150" class="img-responsive img-rounded"></a> 
 
     <a href="#"><img src="http://placehold.it/350x150" class="img-responsive img-rounded"></a> 
 
     <a href="#"><img src="http://placehold.it/350x150" class="img-responsive img-rounded"></a> 
 
     <a href="#"><img src="http://placehold.it/350x150" class="img-responsive img-rounded"></a> 
 
     <a href="#"><img src="http://placehold.it/350x150" class="img-responsive img-rounded"></a> 
 
     <a href="#"><img src="http://placehold.it/350x150" class="img-responsive img-rounded"></a> 
 
     <a href="#"><img src="http://placehold.it/350x150" class="img-responsive img-rounded"></a> 
 
     <a href="#"><img src="http://placehold.it/350x150" class="img-responsive img-rounded"></a> 
 
     <a href="#"><img src="http://placehold.it/350x150" class="img-responsive img-rounded"></a> 
 
     <a href="#"><img src="http://placehold.it/350x150" class="img-responsive img-rounded"></a> 
 
     </div> 
 
    </div> 
 
    
 
    <div class="tab-pane fade" id="locations"> \t \t \t 
 
     <div class="col-lg-12"> 
 
     <a href="#"><img src="{{ asset('img/locations/banglaore_2.png')}}" class="img-responsive img-rounded"></a> 
 
     </div> 
 
     <div class="col-lg-12"> 
 
     <a href="#"><img src="{{ asset('img/locations/delhi_2.png')}}" class="img-responsive img-rounded"></a> 
 
     </div> 
 
     <div class="col-lg-12"> 
 
     <a href="#"><img src="{{ asset('img/locations/goa_2.png')}}" class="img-responsive img-rounded"></a> 
 
     </div> 
 
     <div class="col-lg-12"> 
 
     <a href="#"><img src="{{ asset('img/locations/himachal_2.jpg')}}" class="img-responsive img-rounded"></a> 
 
     </div> 
 
     <div class="col-lg-12"> 
 
     <a href="#"><img src="{{ asset('img/locations/mumbai_2.png')}}" class="img-responsive img-rounded"></a> 
 
     </div> 
 
     <div class="col-lg-12"> 
 
     <a href="#"><img src="{{ asset('img/locations/rishikesh_2.png')}}" class="img-responsive img-rounded"></a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
</div>

Answer 1

添加overflow: auto;并指定一些高度

.right-sidebar-wrapper{ 
    overflow: auto; 
    height: 500px; 
} 

Answer 2

您.nav-tabs试试这个

#activity { 
    float: right; 
    height: 325px; 
    overflow: auto; 
} 

Answer 3

使用position:fixed;并给予一定margin-top吨你的标签。所以它不会隐藏在nav-tabs下。

$(document).ready(function(){ 
 
    $('#activity, #locations').lionbars({ 
 
    autohide: true 
 
    }); 
 
});

.right-sidebar-wrapper{ 
 
    position: absolute; 
 
    right: 0; 
 
    width: 24%; 
 
    top:0; 
 
    bottom: 0; 
 
    height: 100%; 
 
    background: #FFF; 
 
    box-shadow: 0 -1px 24px rgba(0,0,0,0.4); 
 
    z-index: 1; 
 
    overflow: hidden; 
 
    overflow-y: scroll; 
 
} 
 
#r-s-tab{ 
 
    display: inline-block; 
 
    height: 80%; 
 
    width: 100%; 
 
    margin-bottom: 10px; 
 
    margin-top: 50px; 
 
} 
 
#r-s-tab #activity a, #r-s-tab #locations a{ 
 
    padding-top: 8px; 
 
    border-radius: 3px; 
 
    display: block; 
 
} 
 
.nav-tabs{ 
 
    position: fixed; 
 
    z-index: 999; 
 
    background: white; 
 
    width: 100%; 
 

 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://bootswatch.com/bower_components/bootstrap/dist/js/bootstrap.min.js"></script> 
 
<link href="http://bootswatch.com/paper/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="http://charuru.github.io/lionbars/css/lionbars.css" rel="stylesheet"/> 
 
<script src="http://charuru.github.io/lionbars/js/jquery.lionbars.0.3.js"></script> 
 

 
<div class="right-sidebar-wrapper"> 
 
<div class="right-nav"> 
 
    <ul class="nav nav-tabs"> 
 
    <li class="active"><a href="#activity" class="text-center" data-toggle="tab"><!-- Featured Activities --><i class="fa fa-grav fa-2x"></i></a></li> 
 
    <li><a href="#locations" data-toggle="tab" class="text-center"><!-- Locations --><i class="fa fa-map fa-2x" aria-hidden="true"></i></a></li> 
 
    </ul> 
 
    <div id="r-s-tab" class="tab-content"> 
 
    <div class="tab-pane fade active in" id="activity"> \t \t 
 
     <div class="col-lg-12"> 
 
     <a href="#"><img src="http://placehold.it/350x150" class="img-responsive img-rounded"></a> 
 
     <a href="#"><img src="http://placehold.it/350x150" class="img-responsive img-rounded"></a> 
 
     <a href="#"><img src="http://placehold.it/350x150" class="img-responsive img-rounded"></a> 
 
     <a href="#"><img src="http://placehold.it/350x150" class="img-responsive img-rounded"></a> 
 
     <a href="#"><img src="http://placehold.it/350x150" class="img-responsive img-rounded"></a> 
 
     <a href="#"><img src="http://placehold.it/350x150" class="img-responsive img-rounded"></a> 
 
     <a href="#"><img src="http://placehold.it/350x150" class="img-responsive img-rounded"></a> 
 
     <a href="#"><img src="http://placehold.it/350x150" class="img-responsive img-rounded"></a> 
 
     <a href="#"><img src="http://placehold.it/350x150" class="img-responsive img-rounded"></a> 
 
     <a href="#"><img src="http://placehold.it/350x150" class="img-responsive img-rounded"></a> 
 
     </div> 
 
    </div> 
 
    
 
    <div class="tab-pane fade" id="locations"> \t \t \t 
 
     <div class="col-lg-12"> 
 
     <a href="#"><img src="{{ asset('img/locations/banglaore_2.png')}}" class="img-responsive img-rounded"></a> 
 
     </div> 
 
     <div class="col-lg-12"> 
 
     <a href="#"><img src="{{ asset('img/locations/delhi_2.png')}}" class="img-responsive img-rounded"></a> 
 
     </div> 
 
     <div class="col-lg-12"> 
 
     <a href="#"><img src="{{ asset('img/locations/goa_2.png')}}" class="img-responsive img-rounded"></a> 
 
     </div> 
 
     <div class="col-lg-12"> 
 
     <a href="#"><img src="{{ asset('img/locations/himachal_2.jpg')}}" class="img-responsive img-rounded"></a> 
 
     </div> 
 
     <div class="col-lg-12"> 
 
     <a href="#"><img src="{{ asset('img/locations/mumbai_2.png')}}" class="img-responsive img-rounded"></a> 
 
     </div> 
 
     <div class="col-lg-12"> 
 
     <a href="#"><img src="{{ asset('img/locations/rishikesh_2.png')}}" class="img-responsive img-rounded"></a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
</div>