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

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

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

然后滚动的效果css

 1 .div_item #nav {
 2     overflow-x: scroll;
 3     position: relative;
 4     color: #666666;
 5 }
 6 .div_item #nav .list{
 7     box-sizing: border-box;
 8     white-space: nowrap;
 9     padding: 0 1.5rem;
10     width: max-content;
11 }
12 .div_item #nav .item {
13     width: 150px;
14     height: 3rem;
15     font-size: 1.5rem;
16     line-height: 3rem;
17     margin-right: 1rem;
18     display: inline-block;
19     transition: font-size 0.15s;
20 }
21 .div_item #nav .item.selected {
22     color: #191919;
23     font-size: 2rem;
24 }

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