横向滚动导航菜单出现上下滚动问题的排查请求

问题根源分析 #

你的导航菜单出现上下移动、偶尔消失的情况，主要由以下几个CSS属性的不合理设置导致：

• overflow: auto 未限制滚动方向，默认允许垂直滚动，触摸或鼠标操作时容易触发垂直偏移
• position: sticky 搭配高度不确定的容器，滚动时可能因内容高度变化导致定位异常
• 菜单项无上下内边距，容器高度依赖内容，稳定性差；同时li + li:before的padding: 20px是四方向内边距，额外增加了垂直高度

修复方案及代码调整 #

以下是针对性的修改，彻底解决滚动异常问题：

.scrollmenu {
  background-color: rgba(255, 255, 255, 1);
  overflow-x: auto; /* 仅允许横向滚动 */
  overflow-y: hidden; /* 禁用垂直滚动，从根源避免上下移动 */
  -webkit-overflow-scrolling: touch; /* 优化iOS设备滚动体验 */
  white-space: nowrap;
  color: black;
  -ms-overflow-style: none; /* IE/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;
  min-height: 44px; /* 固定最小高度，适配触摸点击区域，避免高度波动 */
}

.scrollmenu::-webkit-scrollbar {
  display: none; /* Chrome/Safari 隐藏滚动条 */
}

/* 限定选择器范围，避免影响全局列表样式 */
.scrollmenu li,
.scrollmenu a {
  display: inline-block;
  color: rgb(138, 138, 138);
  text-align: center;
  padding: 10px 0; /* 添加上下内边距，提升点击体验，稳定容器高度 */
  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样式仅作用于当前菜单 */
.scrollmenu ul {
  padding: 0;
  margin: 0;
}

/* 修正分隔符内边距，仅左右生效，不影响垂直高度 */
.scrollmenu li + li:before {
  content: " | ";
  padding: 0 20px;
}

关键修改说明 #

1. 限制滚动方向：overflow-x: auto; overflow-y: hidden 彻底禁用垂直滚动，杜绝上下移动的可能
2. 固定容器高度：min-height: 44px 符合iOS触摸元素最小高度标准，同时避免粘性定位时因内容高度变化导致偏移
3. 优化触摸体验：-webkit-overflow-scrolling: touch 让iOS设备上的滚动更流畅，减少异常触发
4. 修正内边距设置：将分隔符的四方向内边距改为仅左右，避免额外增加垂直高度；给菜单项添加上下内边距，提升点击区域

内容的提问来源于stack exchange，提问作者dariocodes