<div class="drawer" id="drawer">
  <ul>
    <li class="slider-act">民谣D型</li>
    <li>民谣OM型</li>
    <li>民谣GA型</li>
    <li>弹指演奏家系列</li>
    <li>旅行吉他</li>
    <li>旅行吉他</li>
    <li>复古民谣</li>
    <li>宽体民谣</li>
    <li>V系列</li>
    <li>拾音器</li>
    <li>周边配件</li>
    <li>古典</li>
    <li>尤克里里</li>
  </ul>
</div>

<!-- <script>
  let drawer = document.querySelector('#drawer');
  let ul = drawer.children[0];
  let liList = document.querySelectorAll('li');
  let totalWidth = 0;
  liList.forEach(li => {
    totalWidth += li.offsetWidth;
  });
  // 动态设置ul得宽度
  ul.style.width = totalWidth + 'px';
  let startX = 0; // 刚开始触碰到屏幕时的手指信息
  let centerX = 0; // 用来记录每次触摸时上一次的偏移距离
  let maxRight = 0; // 向右滑动最大距离
  let maxLeft = -(ul.offsetWidth - drawer.offsetWidth + maxRight); // 求得一个向左滑动的距离
  let maxLeftBounce = 0; // 向左反弹的值
  let maxRightBounce = -(ul.offsetWidth - drawer.offsetWidth); // 向右反弹的值
  ul.addEventListener(
    'touchstart',
    function (e) {
      startX = e.changedTouches[0].clientX;
    })
  ul.addEventListener(
    'touchmove',
    function (e) {
      // 清除过渡
      ul.style.transition = 'none';
      // 获取差值
      let dx = e.changedTouches[0].clientX - startX;
      // 上次的滑动距离加上本次的滑动距离
      var tempX = centerX + dx;
      // 当上次滑动的距离加上本次滑动的距离 大于 设定的最大向右距离的时候
      if (tempX > maxRight) {
        tempX = maxRight;
      }
      // 当上次滑动的距离加上本次滑动的距离 小于 设定的最大向左距离的时候 
      else if (tempX < maxLeft) {
        tempX = maxLeft;
      }
      // 设置 ul 在 X 轴上的偏移
      ul.style.transform = 'translateX(' + tempX + 'px)';
    })
  // touchend 时，记录此时手指在 X 轴上的落点距离可视左部距离
  ul.addEventListener(
    'touchend',
    function (e) {
      // 获取差值
      let dx = e.changedTouches[0].clientX - startX;
      // 记录移动的距离
      centerX = centerX + dx;
      // 两次滑动的距离 大于 设定的 向左 反弹值时
      if (centerX > maxLeftBounce) {
        // 让两次滑动的距离 等于 设置的值
        centerX = maxLeftBounce;
        // 添加过渡
        ul.style.transition = 'transform .5s';
        ul.style.transform = 'translateX(' + centerX + 'px)';
      }
      // 两次滑动的距离 小于 设定的 向右 反弹值时
      else if (centerX < maxRightBounce) {
        // 让两次滑动的距离 等于 设置的值
        centerX = maxRightBounce;
        // 添加过渡
        ul.style.transition = 'transform .5s';
        ul.style.transform = 'translateX(' + centerX + 'px)';
      }
    })
</script> -->

<script>
  let drawer = document.querySelector('#drawer');
  let ul = drawer.children[0];
  let liList = document.querySelectorAll('li');
  let totalWidth = 0;
  liList.forEach(li => {
    totalWidth += li.offsetWidth;
  });
  // 动态设置ul得宽度
  ul.style.width = totalWidth + 'px';
  let startX = 0; // 刚开始触碰到屏幕时的手指信息
  let centerX = 0; // 用来记录每次触摸时上一次的偏移距离
  let maxRight = 0; // 向右滑动最大距离
  let maxLeft = -(ul.offsetWidth - drawer.offsetWidth + maxRight); // 求得一个向左滑动的距离
  let maxLeftBounce = 0; // 向左反弹的值
  let maxRightBounce = -(ul.offsetWidth - drawer.offsetWidth); // 向右反弹的值

  var touchEvents = {
    touchstart: "touchstart",
    touchmove: "touchmove",
    touchend: "touchend",
    initTouchEvents: function () {
      var self = this;
      if (self.isPC()) {
        self.touchstart = "mousedown";
        self.touchmove = "mousemove";
        self.touchend = "mouseup";
      }
    },
    isPC: function () { //判断pc端与移动端

      var userAgentInfo = navigator.userAgent;
      var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"); //判断用户代理头信息
      var flag = true;
      for (var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) != -1) {
          flag = false;
          break;
        }
      }
      return flag; //true为pc端，false为非pc端
    }
  };

  ul.addEventListener(
    // 'touchstart',
    `${touchEvents.touchstart}`,
    function (e) {
      startX = e.changedTouches[0].clientX;
    })
  ul.addEventListener(
    // 'touchmove',
    `${touchEvents.touchmove}`,
    function (e) {
      // 清除过渡
      ul.style.transition = 'none';
      // 获取差值
      let dx = e.changedTouches[0].clientX - startX;
      // 上次的滑动距离加上本次的滑动距离
      var tempX = centerX + dx;
      // 当上次滑动的距离加上本次滑动的距离 大于 设定的最大向右距离的时候
      if (tempX > maxRight) {
        tempX = maxRight;
      }
      // 当上次滑动的距离加上本次滑动的距离 小于 设定的最大向左距离的时候 
      else if (tempX < maxLeft) {
        tempX = maxLeft;
      }
      // 设置 ul 在 X 轴上的偏移
      ul.style.transform = 'translateX(' + tempX + 'px)';
    })
  // touchend 时，记录此时手指在 X 轴上的落点距离可视左部距离
  ul.addEventListener(
    // 'touchend',
    `${touchEvents.touchend}`,
    function (e) {
      // 获取差值
      let dx = e.changedTouches[0].clientX - startX;
      // 记录移动的距离
      centerX = centerX + dx;
      // 两次滑动的距离 大于 设定的 向左 反弹值时
      if (centerX > maxLeftBounce) {
        // 让两次滑动的距离 等于 设置的值
        centerX = maxLeftBounce;
        // 添加过渡
        ul.style.transition = 'transform .5s';
        ul.style.transform = 'translateX(' + centerX + 'px)';
      }
      // 两次滑动的距离 小于 设定的 向右 反弹值时
      else if (centerX < maxRightBounce) {
        // 让两次滑动的距离 等于 设置的值
        centerX = maxRightBounce;
        // 添加过渡
        ul.style.transition = 'transform .5s';
        ul.style.transform = 'translateX(' + centerX + 'px)';
      }
    })
</script>