jquery - 如何将滚动条添加到导航选项卡内容？

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">  		
      <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">  			
      <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;
}