1. 首頁
  2. 問答
  3. 如何將滾動條添加到導航標籤的內容？

如何將滾動條添加到導航標籤的內容？

2016-12-07 87 views
0

我使用重疊滾動條的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>

來源

2016-12-07 Romil

+0

它沒有任何內容這就是爲什麼它不shwing。你想要一個水平滾動條還是垂直？ –

+0

你忘了鏈接字體真棒css –

+0

垂直滾動條 – Romil

回答

0

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

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

來源

2016-12-07 09:00:00 Rahul

+0

我只希望導航標籤內容滾動 – Romil

+0

和您的CSS添加到整個div，我不想要 – Romil

0

您.nav-tabs試試這個

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

來源

2016-12-07 09:06:46

+0

導航選項卡應固定僅內容應滾動能夠 – Romil

+0

只是試試這個我認爲這是你需要的 –

0

使用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>

來源

2016-12-07 09:17:35

相關問題

 相關問題