问题
I am using Bootstrap's 3.2.0 Off Canvas layout located at - http://getbootstrap.com/examples/offcanvas/
I know this is a common issue that if the content of the sidebar is longer than the content of the main container that the scroll bar no longer scrolls the content properly (both sidebar and main) but cuts off the sidebar and also places the scrollbar below the navbar.
I can reproduce this problem by taking the above template and adding additional links to the sidebar while putting less content in the main container, example:
<div class="container">
<div class="row row-offcanvas row-offcanvas-right">
<div class="col-xs-12 col-sm-9">
<p class="pull-right visible-xs">
<button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
</p>
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p>
</div>
<div class="row">
<div class="col-12 col-sm-12 col-lg-12">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/span-->
</div><!--/row-->
</div><!--/span-->
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
<div class="list-group">
<a href="#" class="list-group-item active">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
</div>
<div class="list-group">
<a href="#" class="list-group-item active">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
</div>
<div class="list-group">
<a href="#" class="list-group-item active">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
</div>
</div><!--/span-->
</div><!--/row-->
<hr>
<footer>
<p>© Company 2014</p>
</footer>
</div><!--/.container-->
Is there anyway to reliably have the sidebar working no matter how long the main content is?
回答1:
a quick fix in offcanvas.j:
jQuery('[data-toggle=offcanvas]').click(function () {
// add this line to change the position of sidebar
jQuery('.row-offcanvas').hasClass( "active" ) ? jQuery('.sidebar-offcanvas').css("position","absolute") : jQuery('.sidebar-offcanvas').css("position","relative");
// end modif
jQuery('.row-offcanvas').toggleClass('active')
});
回答2:
I've encountered this exact problem. After trying many workarounds, I simply found out that removing double overflow-x worked for me.
So simply remove either body or html from:
html,
body {
overflow-x: hidden; /* Prevent scroll on narrow devices */
}
I preferred to keep body.
回答3:
Here is the HTML Structure we have to follow:-
<div class="container">
<div class="row row-offcanvas row-offcanvas-left">
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>
<div class="col-xs-12 col-sm-9 content-div">
<p class="pull-left hide-p visible-xs">
<button type="button" class="btn btn-primary btn-sm" data-toggle="offcanvas">Toggle nav</button>
</p>
</div>
</div>
</div>
That's the css
<style>
.postion{
position:relative;
margin-left:-50%;
}
</style>
Jquery code will be like this.
<script type="text/javascript">
$(document).ready(function () {
jQuery('[data-toggle=offcanvas]').click(function () {
// add this line to change the position of sidebar
jQuery('.row-offcanvas').hasClass( "active" ) ? jQuery('.sidebar-offcanvas').css("position","absolute") : jQuery('.sidebar-offcanvas').css("position","relative");
// end modif
$(".content-div").toggleClass("postion");
jQuery('.row-offcanvas').toggleClass('active')
});
});
</script>
So that's what we have to use. Now i am explaining the thing.When we click button the offcanvas div will add css position relative. And the other content div will toggle a class which css will be position:relative; margin-left:-50%;
I made both type of offcanvas left to right and right to left. If you want you can download those 2 code from my dropbox. Thank you.
https://www.dropbox.com/s/w5x4668edczif44/Bootstarap.zip?dl=0
来源：https://stackoverflow.com/questions/24579948/bootstrap-off-canvas-if-content-less-than-sidebar-messed-up-scrolling