滚动菜单向上和向下移动，以及当我想要它只滚动侧向

Question

我的<nav>菜单应该只滚动到一边查看所有选项，但我注意到，如果你用光标触摸它，特别是你的手指在浏览器中的iPhone它上下移动，有时消失。我不知道是哪个属性导致的

HTML:

<nav class="scrollmenu">
<ul>
<li><a href="#starters">STARTERS</a></li>
<li><a href="#ramen">RAMEN</a></li>
<li><a href="">MAZEMEN</a></li>
<li><a href="">TSUKEMEN</a></li>
<li><a href="">DESSERT</a></li>
<li><a href="">RAMEN</a></li>
<li><a href="">DINNER</a></li>
<li><a href="">DRINKS</a></li>
</ul>
</nav>

CSS:

.scrollmenu {
background-color: rgba(255, 255, 255, 1);
overflow: auto;
white-space: nowrap;
color: black;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
z-index: 100;
max-width: 840px;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
padding-left: 20px;
}
.scrollmenu::-webkit-scrollbar {
display: none;
}
.scrollmenu a,
li {
display: inline-block;
color: rgb(138, 138, 138);
text-align: center;
padding: 0px;
text-decoration: none;
font-weight: 600;
}
.scrollmenu p {
display: inline-block;
color: rgb(138, 138, 138);
text-align: center;
text-decoration: none;
}
.scrollmenu a:hover {
color: black;
}
.scrollmenu a:active {
color: black;
text-decoration: underline;
}
ul {
padding: 0;
margin: 0;
}
nav li + li:before {
content: " | ";
padding: 20px;
}

所以基本上菜单应该只滚动到一边这样你就可以在浏览器窗口中查看所有选项

Answer 1

它有一个默认启用的垂直滚动，一个可能的解决方案是禁用nav元素通过overflow-y: hidden;:

.scrollmenu {
background-color: rgba(255, 255, 255, 1);
overflow: auto;
white-space: nowrap;
color: black;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
z-index: 100;
max-width: 840px;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
padding-left: 20px;
overflow-y: hidden;
}
.scrollmenu::-webkit-scrollbar {
display: none;
}
.scrollmenu a,
li {
display: inline-block;
color: rgb(138, 138, 138);
text-align: center;
padding: 0px;
text-decoration: none;
font-weight: 600;
}
.scrollmenu p {
display: inline-block;
color: rgb(138, 138, 138);
text-align: center;
text-decoration: none;
}
.scrollmenu a:hover {
color: black;
}
.scrollmenu a:active {
color: black;
text-decoration: underline;
}
ul {
padding: 0;
margin: 0;
}
nav li + li:before {
content: " | ";
padding: 20px;
}

<nav class="scrollmenu">
<ul>
<li><a href="#starters">STARTERS</a></li>
<li><a href="#ramen">RAMEN</a></li>
<li><a href="">MAZEMEN</a></li>
<li><a href="">TSUKEMEN</a></li>
<li><a href="">DESSERT</a></li>
<li><a href="">RAMEN</a></li>
<li><a href="">DINNER</a></li>
<li><a href="">DRINKS</a></li>
</ul>
</nav>