css手写移动端导航栏横向拖动 , 并有锚点定位

需求 :  1 , 移动端导航栏太长 , 超出了屏幕 , 需要溢出隐藏 , 手指可以左右拖动 

           2 , 点击某个导航栏定位到对应模块

//导航栏
<div class="nav">
        <ul>
          <li><a href="#yw">语文</a></li>
          <li> <a href="#math"> 数学</a></li>
          <li> <a href="#eng"> 英语</a></li>
          <li><a href="#zz"> 政治</a></li>
          <li><a href="#his"> 历史</a></li>
          <li> <a href="#geo"> 地理</a></li>
          <li> <a href="#wl"> 物理</a></li>
          <li><a href="#phy"> 化学</a></li>
          <li> <a href="#sw"> 生物 </a></li>
          <li> <a href="#sport"> 体育 </a></li>
          <li> <a href="#ms"> 美术 </a></li>
          <li> <a href="#music"> 音乐 </a></li>
          <li> <a href="#think"> 思想 </a></li>
        </ul>
 </div>


// 对应内容模块 

 <div id="yw">

 这里是语文模块的内容 ,点击语文导航栏, 定位到这个区域

 </div>



 <div id="math">

 这里是数学模块的内容 ,点击数学导航栏, 定位到这个区域

 </div>



//样式
   .nav {
      width: 100%;
     // 横向滚动
      overflow-x: scroll;
      overflow-y: hidden;
      

      ul {
        //强制不换行 , 一行显示
        white-space: nowrap;

        li {
          display: inline-block;

        }
      }

      a {
       
       text-decoration: none;
       display: inline-block;
       margin: 0.15rem;
      }
    }

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