手机端H5导航无滚动条滑动效果

<div class="div_item">
　　<div id="nav">
　　　　<ul class="list">
　　　　　　<li class="item">导航1</li>
          <li class="item">导航2</li>
          <li class="item">导航3</li>
          <li class="item">导航4</li>
          <li class="item">导航5</li>
          <li class="item">导航6</li>
          <li class="item">导航7</li>
          <li class="item">导航8</li>
          <li class="item">导航9</li>
          <li class="item">导航10</li>
          <li class="item">导航11</li>
          <li class="item">导航12</li>
          <li class="item">导航13</li>
          <li class="item">导航14</li>
          <li class="item">导航15</li>
          <li class="item">导航16</li>
          <li class="item">导航17</li>
          <li class="item">导航18</li>
          <li class="item">导航19</li>
          <li class="item">导航20</li>
　　　　</ul>
　　</div>
</div>

首先 加入我们的导航列表，具体样式可以自己调整，这里我用最简单的样式；

然后滚动的效果css

.div_item #nav {
    overflow-x: scroll;
    position: relative;
    color: #666666;
}
.div_item #nav .list{
    box-sizing: border-box;
    white-space: nowrap;
    padding: 0 1.5rem;
    width: max-content;
}
.div_item #nav .item {
    width: 150px;
    height: 3rem;
    font-size: 1.5rem;
    line-height: 3rem;
    margin-right: 1rem;
    display: inline-block;
    transition: font-size 0.15s;
}
.div_item #nav .item.selected {
    color: #191919;
    font-size: 2rem;
}

　　　　/* 隐藏滚动条 */

.div_item #nav::-webkit-scrollbar {
    display: none;
}