SOURCE

function horizontalScroll (el) {
      let translateX = 0
      let startX
      let moveX
      let scrollWidth = el.parentNode.offsetWidth - el.offsetWidth
      el.addEventListener('touchstart', function (e) {
        startX = e.touches[0].clientX
      })
      
      el.addEventListener('touchmove', function (e) {
        let clientX = e.touches[0].clientX
        let distance = clientX - startX
        moveX = translateX + distance
        
        this.style.transition = 'none'
        this.style.transform = `translateX(${moveX}px)`
      })
      
      el.addEventListener('touchend', function (e) {
        translateX = moveX
        
        // 移动距离超出了范围
        if (moveX > 0 ||　moveX < scrollWidth) {
          // 超出了左边的边界
          if (moveX > 0) {
            translateX = 0
          } else if (moveX < scrollWidth) {
            // 超出了右边的边界
            translateX = scrollWidth
          }
          setTranslateX(translateX)
        }
      })
      
      function setTranslateX (translateX) {
        el.style.transition = '1s transform'
        el.style.transform = `translateX(${translateX}px)`
      }
    }
    
    const $list = document.querySelector('.list')
    horizontalScroll($list)

<div class="box">
    <ul class="list">
      <li class="item">新闻</li>
      <li class="item">提醒</li>
      <li class="item">阿三</li>
      <li class="item">二人</li>
      <li class="item">两个</li>
      <li class="item">减肥</li>
      <li class="item">为额</li>
      <li class="item">明白</li>
      <li class="item">部门</li>
      <li class="item">成都</li>
      <li class="item">新闻</li>
      <li class="item">提醒</li>
      <li class="item">阿三</li>
      <li class="item">二人</li>
      <li class="item">两个</li>
      <li class="item">减肥</li>
      <li class="item">为额</li>
      <li class="item">明白</li>
      <li class="item">部门</li>
      <li class="item">成都</li>
      <li class="item">新闻</li>
      <li class="item">提醒</li>
      <li class="item">阿三</li>
      <li class="item">二人</li>
      <li class="item">两个</li>
      <li class="item">减肥</li>
      <li class="item">为额</li>
      <li class="item">明白</li>
      <li class="item">部门</li>
      <li class="item">成都</li>
    </ul>
  </div>

* {
      margin: 0;
      padding: 0;
    }
    .box {
      height: 50px;
      overflow: hidden;
    }
    .list {
      padding: 0 10px;
      display: inline-block;
      white-space: nowrap;
      height: 50px;
      line-height: 50px;
    }
    .item {
      display: inline-block;
      padding: 0 10px;
      font-size: 14px;
    }