折叠导航时隐藏水平滚动条

Question

这有点难以解释所以我有一个jsfiddle demo，我有一个bootstrap nav菜单在没有聚焦时折叠成图标，然后在聚焦时扩展为图标和单词，菜单展开没有滚动条但是当nav菜单折叠时，我得到的滚动条不应该在那里，当菜单折叠时我如何隐藏水平滚动条？

 $('#sidebar').mouseover(function() {
     if($('.row-offcanvas').hasClass("active")){
        $('.row-offcanvas').toggleClass('active');
        $('.collapse').toggleClass('in').toggleClass('hidden-xs').toggleClass('visible-xs');
        $('#main').removeClass('expanded');
     }
}).mouseout(function() {
    $('.row-offcanvas').toggleClass('active');
    $('.collapse').toggleClass('in').toggleClass('hidden-xs').toggleClass('visible-xs');
    $('#main').addClass('expanded');
});

html, body {
   height: 100%;
}

.wrapper, .row {
   height: 100%;
   margin-left:0;
   margin-right:0;
}

.wrapper:before, .wrapper:after,
.column:before, .column:after {
    content: "";
    display: table;
}

.wrapper:after,
.column:after {
    clear: both;
}

#sidebar {
    background-color: #eee;
    padding-left: 0;
    float: left;
    min-height: 100%;
    padding-right: 0;
}

#sidebar .collapse.in {
    display: inline;
}

#sidebar > .nav>li>a {
    white-space: nowrap;
    overflow: hidden;
}

#main {
    padding: 15px;
    left: 0;
}

.expanded{
  margin-left: 25px;
  margin-right: 25px;
  width: 95%;
}

/*
 * off canvas sidebar
 * --------------------------------------------------
 */
@media screen and (max-width: 768px) {
    #sidebar {
        min-width: 44px;
    }
    
    #main {
        width: 1%;
        left: 0;
    }
    
    #sidebar .visible-xs {
       display:inline !important;
    }
    
    .row-offcanvas {
       position: relative;
       -webkit-transition: all 0.4s ease-in-out;
       -moz-transition: all 0.4s ease-in-out;
       transition: all 0.4s ease-in-out;
    }
    
    .row-offcanvas-left.active {
       left: 45%;
    }
    
    .row-offcanvas-left.active .sidebar-offcanvas {
       left: -45%;
       position: fixed;
       top: 0;
       width: 45%;
    }
} 
 
 
@media screen and (min-width: 768px) {
  .row-offcanvas {
    position: relative;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
  }
  
  .sidebar-offcanvas{
      position: fixed;
  }

  .row-offcanvas-left.active {
    left: 3%;
  }

  .row-offcanvas-left.active .sidebar-offcanvas {
    left: 0;
    position: fixed;
    top: 0;
    width: 3%;
    text-align: center;
    min-width:42px;
  }
  
  #main {
    left: 2%;
  }
   #main.expanded {
    left: 0;
    overflow: hidden;
  }
}


       #delete a {
          color: red;
        }
        #delete a:hover {
          color: white;
          background-color: red;
        }
        .divider{
            margin-top: 1rem;
            margin-bottom: 1rem;
            border: 0;
            border-top: 1px solid rgba(0, 0, 0, 0.1);
        }
        .nav > li > a:hover{
          color: white;
          background-color: #4285F4;
        }

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
    <div class="row row-offcanvas row-offcanvas-left">
        <!-- sidebar -->
        <div class="column col-sm-3 col-xs-1 sidebar-offcanvas" id="sidebar">
             <ul class="nav" id="menu">
                    <li><a href="#"><i class="fa fa-dashboard"></i> <span class="collapse in hidden-xs">Dashboard</span></a></li>
                    <li><a href="#"><i class="fa fa-exchange"></i> <span class="collapse in hidden-xs">Process</span></a></li>
                    <li><a href="#"><i class="fa fa-warning"></i> <span class="collapse in hidden-xs">Issues</span></a></li>
                    <li id="delete"><a href="#"><i class="fa fa-trash"></i> <span class="collapse in hidden-xs">Delete</span></a></li>
                    <li><a href="#"><i class="fa fa-paperclip"></i> <span class="collapse in hidden-xs">Reports</span></a></li>
                    <li><a href="#"><i class="fa fa-files-o"></i> <span class="collapse in hidden-xs">Logs</span></a></li>
                    <li>
                        <a href="#" data-target="#item1" data-toggle="collapse"><i class="fa fa-truck"></i> <span class="collapse in hidden-xs">SelectShip <span class="caret"></span></span></a>
                        <ul class="nav nav-stacked collapse left-submenu" id="item1">
                            <li><a href='#'><i class="fa fa-pencil-square"></i> Template</a></li>
                            <li><a href='#'><i class="fa fa-calendar"></i> Schedule</a></li>
                        </ul>
                    </li>
                    <li class="divider"></li>
                    <li><a href='https://login.salesforce.com'><i class="fa fa-cloud"></i> <span class="collapse in hidden-xs">Salesforce</span></a></li>
                </ul>
        </div>
        <!-- /sidebar -->

        <!-- main right col -->
        <div class="column col-sm-9 col-xs-11" id="main">
            <h1 class="page-header">Dashboard</h1>
            <p>
                How do I keep the horizontal bar from showing when the nav bar is collapsed? 
            </p>
            <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc molestie feugiat lectus eu scelerisque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque ac ex non turpis faucibus sagittis eget et sem. Aenean neque sapien, rutrum non egestas a, efficitur sed nulla. Mauris lacinia venenatis nisi lobortis porttitor. Suspendisse placerat purus eget nisi accumsan molestie. Sed sed ultrices felis, vitae tempus est. Aliquam tempus, nibh vitae varius commodo, felis ante fringilla odio, in malesuada augue quam sed nulla. Proin eget rhoncus lorem, at egestas mauris.
            </p>
            <p>
            Aenean venenatis ultrices egestas. Nam ut blandit augue. Nulla luctus ultricies massa, et tempus justo pharetra ac. Aliquam suscipit accumsan lectus nec dapibus. Nullam a nulla at velit faucibus vehicula. Sed et est purus. Morbi eget arcu sed dui consequat efficitur. Phasellus id erat mauris.
            </p>
            <p>
            Praesent non velit lacus. Praesent tincidunt, felis ut pretium dignissim, orci augue suscipit odio, sodales ultrices velit metus luctus dui. Phasellus tincidunt nulla sit amet mauris imperdiet posuere. Praesent at risus neque. Donec eleifend molestie tellus, a tincidunt leo rutrum ac. Nullam eget dictum neque. Aenean dignissim eleifend elementum. Pellentesque mattis rutrum dolor id sagittis. Morbi blandit rhoncus vehicula.
            </p>
             <p>
            Praesent non velit lacus. Praesent tincidunt, felis ut pretium dignissim, orci augue suscipit odio, sodales ultrices velit metus luctus dui. Phasellus tincidunt nulla sit amet mauris imperdiet posuere. Praesent at risus neque. Donec eleifend molestie tellus, a tincidunt leo rutrum ac. Nullam eget dictum neque. Aenean dignissim eleifend elementum. Pellentesque mattis rutrum dolor id sagittis. Morbi blandit rhoncus vehicula.
            </p>
        </div>
        <!-- /main -->
    </div>
</div>

Answer 1

尝试在html，body css标记上使用'overflow：hidden'。

html, body {
   height: 100%;
   overflow: hidden;
}

Answer 2

“左”css属性正在抛弃它。我使用了你的css并做了必要的改变。尝试使用此css

运行它

html, body {
   height: 100%;
}

.wrapper, .row {
   height: 100%;
   margin-left:0;
   margin-right:0;
}

.wrapper:before, .wrapper:after,
.column:before, .column:after {
    content: "";
    display: table;
}

.wrapper:after,
.column:after {
    clear: both;
}

#sidebar {
    background-color: #eee;
    padding-left: 0;
    float: left;
    min-height: 100%;
    padding-right: 0;
}

#sidebar .collapse.in {
    display: inline;
}

#sidebar > .nav>li>a {
    white-space: nowrap;
    overflow: hidden;
}

#main {
    padding: 15px;
    left: 0;
}

.expanded{
  margin-left: 25px;
  margin-right: 25px;
  width: 95%;
}

/*
 * off canvas sidebar
 * --------------------------------------------------
 */
@media screen and (max-width: 768px) {
    #sidebar {
        min-width: 44px;
    }
    
    #main {
        width: 1%;
        left: 0;
    }
    
    #sidebar .visible-xs {
       display:inline !important;
    }
    
    .row-offcanvas {
       position: relative;
       -webkit-transition: all 0.4s ease-in-out;
       -moz-transition: all 0.4s ease-in-out;
       transition: all 0.4s ease-in-out;
    }
    
    .row-offcanvas-left.active {
       left: 45%;
    }
    
    .row-offcanvas-left.active .sidebar-offcanvas {
       left: -45%;
       position: fixed;
       top: 0;
       width: 45%;
    }
} 
 
 
@media screen and (min-width: 768px) {
  .row-offcanvas {
    position: relative;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
  }
  
  .sidebar-offcanvas{
      position: fixed;
  }

  .row-offcanvas-left.active .sidebar-offcanvas {
    left: 0;
    position: fixed;
    top: 0;
    width: 3%;
    text-align: center;
    min-width:42px;
  }
  
  #main {
    left: 25%;
  }
   #main.expanded {
    left: 3%;
    overflow: hidden;
  }
}


       #delete a {
          color: red;
        }
        #delete a:hover {
          color: white;
          background-color: red;
        }
        .divider{
            margin-top: 1rem;
            margin-bottom: 1rem;
            border: 0;
            border-top: 1px solid rgba(0, 0, 0, 0.1);
        }
        .nav > li > a:hover{
          color: white;
          background-color: #4285F4;
        }
html, body {
   height: 100%;
}

.wrapper, .row {
   height: 100%;
   margin-left:0;
   margin-right:0;
}

.wrapper:before, .wrapper:after,
.column:before, .column:after {
    content: "";
    display: table;
}

.wrapper:after,
.column:after {
    clear: both;
}

#sidebar {
    background-color: #eee;
    padding-left: 0;
    float: left;
    min-height: 100%;
    padding-right: 0;
}

#sidebar .collapse.in {
    display: inline;
}

#sidebar > .nav>li>a {
    white-space: nowrap;
    overflow: hidden;
}

#main {
    padding: 15px;
    left: 0;
}

.expanded{
  margin-left: 25px;
  margin-right: 25px;
  width: 95%;
}

/*
 * off canvas sidebar
 * --------------------------------------------------
 */
@media screen and (max-width: 768px) {
    #sidebar {
        min-width: 44px;
    }
    
    #main {
        width: 1%;
        left: 0;
    }
    
    #sidebar .visible-xs {
       display:inline !important;
    }
    
    .row-offcanvas {
       position: relative;
       -webkit-transition: all 0.4s ease-in-out;
       -moz-transition: all 0.4s ease-in-out;
       transition: all 0.4s ease-in-out;
    }
    
    .row-offcanvas-left.active {
       left: 45%;
    }
    
    .row-offcanvas-left.active .sidebar-offcanvas {
       left: -45%;
       position: fixed;
       top: 0;
       width: 45%;
    }
} 
 
 
@media screen and (min-width: 768px) {
  .row-offcanvas {
    position: relative;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
  }
  
  .sidebar-offcanvas{
      position: fixed;
  }

  .row-offcanvas-left.active .sidebar-offcanvas {
    left: 0;
    position: fixed;
    top: 0;
    width: 3%;
    text-align: center;
    min-width:42px;
  }
  
  #main {
    left: 25%;
  }
   #main.expanded {
    left: 3%;
    overflow: hidden;
  }
}


       #delete a {
          color: red;
        }
        #delete a:hover {
          color: white;
          background-color: red;
        }
        .divider{
            margin-top: 1rem;
            margin-bottom: 1rem;
            border: 0;
            border-top: 1px solid rgba(0, 0, 0, 0.1);
        }
        .nav > li > a:hover{
          color: white;
          background-color: #4285F4;
        }