如何 overflow:scroll 置顶 div

Question

我正在创建一个 WordPress 主题，我想制作具有 overflow:scroll 的粘性水平菜单。当我尝试这样做时，会发生什么情况，它要么不起作用，要么隐藏了内容。

下面我post代码。

HTML:

.container
{
 height:100vh;
 
 
}

body
{
 background-color:grey;
 
}

#navmenu 
{
 position:sticky;
 height:70px;
 text-align:center;
 overflow:scroll;
 border-top:1px solid white; 
}

#navmenu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
 text-align:center;
 min-width:100%;
 
 
}

#navmenu li {
    float: left;
 font-size:14px;
 text-align:center;
 
 
 
}

#navmenu li a {
    display: inline-block;
    /*color: white;*/
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
 
}

#navmenu li a:hover
{
 background-color:#111;
}



.logo
{
 height:50px;
 float:left;
}

<html>

<head>
 <link rel="stylesheet" type="text/css" href="about.css">
 
</head>



<body>
 
<div class="container">
<div id="logo"></div>

<div id="navmenu">
 
 <ul>
  <li><img style="height:70px" src="img/logo.png"></li>
  <li><a href="#">OPTION</a></li>
  <li><a href="#">OPTION <br>OPTION</a></li>
  <li><a href="#">OPTION <br>OPTION</a></li>
  <li><a href="#">OPTION <br>OPTION</a></li>
  <li><a href="#">OPTION</a></li>
  <li><a href="#">OPTION OPTION <br>OPTION</a></li>
  <li><a href="#">OPTION</a></li>
  <li><a href="#">OPTION <br>OPTION</a></li>
  <li><a href="#">OPTION</a></li>
 </ul>
 
 
 
</div>



</div>
</body>

</html>

Answer 1

将您的导航包裹在额外的 div 中，并定义宽度。见片段：

.container {
  height: 100vh;
}
body {
  background-color: grey;
}
#navmenu {
  position: sticky;
  height: 70px;
  text-align: center;
  overflow: scroll;
  border-top: 1px solid white;
}

#nav-inner {
  width: 10000px; 
 }
#navmenu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
  min-width: 100%;
}
#navmenu li {
  float: left;
  font-size: 14px;
  text-align: center;
}
#navmenu li a {
  display: inline-block;
  /*color: white;*/
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
#navmenu li a:hover {
  background-color: #111;
}
.logo {
  height: 50px;
  float: left;
}

<div class="container">
  <div id="logo"></div>

  <div id="navmenu">
    <div id="nav-inner">
      <ul>
        <li>
          <img style="height:70px" src="img/logo.png">
        </li>
        <li><a href="#">OPTION</a>
        </li>
        <li><a href="#">OPTION <br>OPTION</a>
        </li>
        <li><a href="#">OPTION <br>OPTION</a>
        </li>
        <li><a href="#">OPTION <br>OPTION</a>
        </li>
        <li><a href="#">OPTION</a>
        </li>
        <li><a href="#">OPTION OPTION <br>OPTION</a>
        </li>
        <li><a href="#">OPTION</a>
        </li>
        <li><a href="#">OPTION <br>OPTION</a>
        </li>
        <li><a href="#">OPTION</a>
        </li>
      </ul>
    </div>


  </div>



</div>

Answer 2

问题的作者已经澄清（见评论）他们希望整个页面水平滚动，而不仅仅是导航栏。

这是一个 JSFiddle 解决方案：jsfiddle。net/qwjshv9s/1

这个解决方案有两个部分。

除了 body 滚动之外，不要让任何东西滚动。

删除所有存在的 overflow:scroll 属性并将 overflow-x:auto 放在 body 本身上。

不允许菜单换行。

将 whitespace:nowrap 应用于 <ul> 并将 <li> 元素从 float:left 切换为 display:inline-block。

--

顺便说一下，要只允许水平滚动，您可以使用：

overflow-x: scroll;

这只允许在 X 轴上滚动。如果你不希望滚动条一直在那里，你可以这样做

overflow-x: auto;

它只会在需要时滚动。

如何 overflow:scroll 置顶 div

How to overflow:scroll on sticky div

css

menu

overflow

sticky