如何使用CSS或JS实现移动端手指滑动的无滚动条水平可滚动导航栏

技术选型 #

该需求纯CSS即可实现，无需引入JavaScript，运行性能更高，移动端适配更稳定。

具体代码实现 #

HTML 结构（和原有提供的结构一致） #

<ul id='list-container'>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

CSS 实现代码 #

/* 媒体查询限制仅在768px以下的移动端设备生效 */
@media (max-width: 768px) {
  #list-container {
    margin: 0;
    padding: 0;
    list-style: none;
    /* 开启flex布局实现子元素横向排列 */
    display: flex;
    /* 允许横向滚动 */
    overflow-x: auto;
    /* 隐藏滚动条兼容火狐浏览器 */
    scrollbar-width: none;
    /* 隐藏滚动条兼容IE/Edge浏览器 */
    -ms-overflow-style: none;
    /* 可选：开启顺滑滚动效果 */
    scroll-behavior: smooth;
    /* 可选：开启滑动停靠，滑动后自动对齐列表项边缘 */
    scroll-snap-type: x mandatory;
  }

  /* 隐藏滚动条兼容Chrome、Safari等webkit内核浏览器 */
  #list-container::-webkit-scrollbar {
    display: none;
  }

  #list-container li {
    /* 禁止列表项自动收缩，保证宽度固定 */
    flex-shrink: 0;
    /* 单个列表项宽度设为50%视口宽度，2项刚好占满整个屏幕宽度 */
    width: 50vw;
    /* 以下为演示用的基础样式，可根据业务需求自行修改 */
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e5e7eb;
    box-sizing: border-box;
    /* 可选：滑动停靠对齐规则 */
    scroll-snap-align: start;
  }
}

核心逻辑说明 #

• 横向滚动实现：通过flex布局让所有列表项横向排列，开启overflow-x: auto支持横向滑动
• 滚动条隐藏：针对不同浏览器内核做了兼容处理，隐藏滚动条的同时不影响正常滚动功能
• 默认展示2项：单个列表项宽度设为50vw，两个列表项总宽度刚好等于移动端视口宽度，默认可视区域刚好展示前两项
• 可选优化项：添加了顺滑滚动和滑动停靠的配置，可根据实际体验需求选择是否保留

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