div 设置了touchmove ，结果overflow 不生效了

Question

在开发中，需要给一个div 设置可移动，可展开的功能，展开的内容是超出div的大小。所以，设置了overflow ，但是，overflow 不生效，去掉 touchmove 方法之后，overflow生效了。
代码如下：
HTML部分

<template>
  <div id="stretchBtn" class="stretchBtn"
   @mousedown="down" @touchstart="down"
    @mousemove="move" @touchmove.prevent="move"
    @mouseup="end" @touchend="end"
  >
    <div class="icon">
      <img src="../assets/img/m-min.png" alt="" width="40px" height="40px" />
    </div>
    <div v-show="isClick" class="lineImg">
      <div v-for="(item, index) in apiGame" :key="index" class="divBorder imgSpacing">
        <img v-lazy="item.icon" width="80px" height="80px">
      </div>
    </div>
  </div>
</template>

script部分：

<script>
export default {
  async asyncData(context) {
    const apiGame = await context.app.api.getGameList();
    console.log('asyncData-----Btn', apiGame)
    return { apiGame }
  },
  data() {
    return {
      isClick: false,
      imgSrc: [],
      flags: false,
      position: { x: 0, y: 0 },
      ny: '',
      dy: '',
      yPum: '',
    }
  },
  methods:{
    handleStretch() {
      this.isClick = !this.isClick
      const obj = document.getElementById('stretchBtn')
      if(this.isClick){
        obj.style.width = '100%';
        console.log('111111')
      }else {
        obj.style.width = '';
      }
    },
    // 实现移动端拖拽
    down(e){
      this.flags = true;
      let touch;
      const odiv = e.target;
      event.touches ? touch = event.touches[0] : touch = event
      this.position.y = touch.clientY;
      this.dy = odiv.offsetTop;
    },
    move(e){
      if(this.flags){
        let touch ;
        const odiv = e.target;
        event.touches ? touch = event.touches[0] : touch = event
        this.ny = touch.clientY - this.position.y;
        this.yPum = this.dy+this.ny;
        odiv.style.top = this.yPum +"px";
        // 阻止页面的滑动默认事件；如果碰到滑动问题，1.2 请注意是否获取到 touchmove
        document.addEventListener('touchmove', function(event) {
          // 判断默认行为是否可以被禁用
          if (event.cancelable) {
              // 判断默认行为是否已经被禁用
            if (!event.defaultPrevented) {
                event.preventDefault();
            }
          }
        }, false);
      }
    },
    // 鼠标释放时候的函数
    end(){
      this.flags = false;
    },
  }
}
</script>

css 部分：

<style scoped>
.icon{
  display: flex;
  flex-direction: column;
}
.stretchBtn {
  background-color: rgb(236, 203, 113) !important;
  position: fixed;
  top: 0;
  left: 0;
  box-shadow: 0 0 15px #7c7c7eaf;
  border-radius: 15px;
  /* cursor:pointer ; */
  display: flex;
  /* justify-content: center; */
  min-width:60px;
  min-height: 60px;
  z-index: 1000;
  padding: 3px 0;
  display: -webkit-box;
  overflow: auto;
}
.lineImg{
  display: flex;
  width: 100%;
  overflow: auto;
}
.imgSpacing{
  padding: 0 3px;
}
</style>

展示效果：
可上下移动

可左右展开

可是，展开内容就是没办法左右拖动了。。。。。。

请教各位大佬们，什么原因导致，有什么办法能够解决。在此，先谢谢各位大佬们了！！！

Answer 1

通过单独写一个透明的div 悬浮的在要移动的按钮上，调用移动的方法，实现移动，和展开之后的滑动。

<template>
  <div>
    <div class="divMove"  @click="handleStretch"
      @mousedown="down" @touchstart="down"
      @mousemove="move" @touchmove.prevent="move"
      @mouseup="end" @touchend="end"
    >
    </div>
    <div id="stretchBtn" class="stretchBtn"> 
    </div>
  </div>
</template>

修改 move 方法，新增如下代码，将divmove 的位置 赋值给 stretchBtn

move(e){
      if(this.flags){
        const objIcon = document.getElementById('stretchBtn')
        const odiv = e.target;
        odiv.style.top = this.yPum +"px";
        objIcon.style.top = this.yPum +"px";
      }
    },

这样，divmove 和 stretchBtn 能够同时移动，且调用handleStretch 的展开缩回方法也是没有问题的。
最后一步，设置 divmove 的class ，将divmove 层级设为最高，且颜色为透明。divmove其他属性与要移动的stretchBtn 的样式一致就好。

.divMove{
  position: fixed;
  top: 0;
  left: 0;
  min-width:60px;
  min-height: 60px;
  background-color: rgba(255, 255, 255, 0);
  z-index: 1999;
}

最后，虽然问题解决了，但是，出现问题的原因还不知道。
在网上查的时候，有人说，overflow 要为块格式化上下文，要设置 height ，这些我都设置了。但依旧不生效。
个人猜测，有可能是因为，touchmove 和 mousemove 判断的是整个 stretchBtn div，所以在进行左右滑动的时候，执行了touchmove 方法，从而，影响了 overflow，没有对内容进行滑动。现在单独写一个移动方法，只针对 divMove 操作，就不会影响到 整体的stretchBtn了。