Bootstrap Off Canvas - 如果内容少于侧边栏搞砸了滚动

Question

我正在使用 Bootstrap 的 3.2.0 Off Canvas 布局 - http://getbootstrap.com/examples/offcanvas/

我知道这是一个常见问题，如果侧边栏的内容长于主容器的内容，滚动条将不再正确滚动内容（侧边栏和主容器），但会切断侧边栏并放置导航栏下方的滚动条。

我可以通过使用上面的模板并在侧边栏添加额外的链接同时在主容器中放置更少的内容来重现此问题，例如：

<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 &raquo;</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>&copy; Company 2014</p>
    </footer>

</div><!--/.container-->

不管主要内容有多长，是否有可靠的侧边栏工作？

Answer 1

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')
});

Answer 2

我遇到了这个确切的问题。在尝试了许多解决方法后，我发现删除双溢出-x 对我有用。

因此，只需从以下位置删除正文或 html：

html,
body {
  overflow-x: hidden; /* Prevent scroll on narrow devices */
}

我更喜欢保留身体。

Answer 3

这是我们必须遵循的 HTML 结构：-

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

这就是CSS

 <style>
     .postion{
    position:relative;
    margin-left:-50%;
}
    </style>

jquery代码会是这样的。

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

所以这就是我们必须使用的。现在我正在解释这件事。当我们单击按钮时，offcanvas div 将添加 css 相对位置。另一个内容 div 将切换一个 css 为 position:relative; 的类。左边距：-50%;

我从左到右和从右到左制作了两种类型的画布。如果您愿意，可以从我的 Dropbox 下载这 2 个代码。谢谢。

https://www.dropbox.com/s/w5x4668edczif44/Bootstarap.zip?dl=0