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

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、正文 css 标签上使用“溢出:隐藏”。

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