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

时间：2016-12-07 08:53:36

标签： jquery html css twitter-bootstrap

我正在使用lionbars滚动条插件来覆盖滚动条，我想将滚动条应用于内容但不幸的是它没有显示。以下是我的参考资料，以帮助我解决问题。

＆＃13;
＆＃13; 
$(document).ready(function(){
  $('#activity, #locations').lionbars({
    autohide: true
  }); 
});
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：0)

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

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

答案 1 :(得分：0)

试试这个

<p>whatever</p>
<button id="mybutton">Click me</button>
<script>
     document.getElementById('mybutton').addEventListener(...
</script>
<p>rest of HTML</p>

答案 2 :(得分：0)

对position:fixed;使用.nav-tabs，并为您的标签提供一些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">  		
      <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>

相关问题
最新问题