在Bootstrap折叠菜单中启用滚动而不显示滚动条

Question

我已尝试再次尝试将折叠的Bootstrap菜单滚动，而不显示滚动条。还没有成功。我试着这样做：

bootstrap navbar collapse with scroll bar

和此：

Hide scroll bar, but while still being able to scroll

什么是最佳做法？是否只有折叠的导航元素滚动，或者在折叠状态下滚动时整个页面是否应滚动？

我已经为标题包含了我的Rails代码：

<header class="navbar navbar-fixed-top navbar-inverse">
  <div class="container">
    <nav>
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

      <div class="nav navbar-nav navbar-left">
        <%= link_to "Hallaballa", root_path, id: "logo" %>
      </div>

      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-center">
          <li><%= link_to "How it works", howto_url %></li>
          <% if logged_in? %>
            <li><%= link_to "Crazy", crazy_url %><li>
            <li><%= link_to "Crazier", crazier_url %><li>
          <% end %>
        </ul>

        <ul class="nav navbar-nav navbar-right">
          <li><%= link_to "About", about_url %></li>
          <li><%= link_to "Blog", "#" %></li>
          <li><%= link_to "FAQ", faq_url %></li>
          <% if logged_in? %>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Account <b class="caret"></b>
              </a>
              <ul class="dropdown-menu">
                <li><%= link_to "Profile", current_user %></li>
                <li><%= link_to "Settings", edit_user_path(current_user) %></li>
                <li><%= link_to "Strange", strange_path %></li>
                <li class="divider"></li>
                <li>
                  <%= link_to "Log out", logout_path, method: :delete %>
                </li>
              </ul>
            </li>
          <% else %>
              <li><%= link_to "Log in", login_path %></li>
          <% end %>
        </ul>
      </div>
    </nav>
  </div>
</header>

CSS：

＆＃13;

＆＃13;

html {
  height: 100%;
  margin: 0;
  overflow-y: scroll;
}

body {
  padding-top: 60px;
  margin: 0;

  background-color: whitesmoke;
}

/* header */

#logo {
  float: left;
  margin-right: 10px;
  margin-left: 5px;
  font-size: 1.8em;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -1px;
  padding-top: 9px;
  font-weight: bold;
  &:hover {
    color: #fff;
    text-decoration: none;
  }
}

#bs-example-navbar-collapse-1 {
  overflow: hidden;
  max-height: none !important;
  height: auto !important;
}

.navbar-toggle {
  margin-top: 6px !important;
  margin-bottom: 0 !important;
}

＆＃13;

＆＃13;

＆＃13;