div的touchmove事件导致overflow失效？原因及解决方案

div设置touchmove事件后overflow失效，是因为touchmove事件会捕获整个元素的触摸移动，覆盖了overflow机制，导致溢出内容无法滚动。即使设置height属性也无效。解决方法是使用一个独立的透明div作为touchmove事件监听目标，避免影响目标div的overflow属性。通过调整HTML结构、JavaScript代码（例如修改move方法，获取触摸坐标并调整元素位置）和CSS样式（设置透明div的position、z-index等属性），即可实现触摸滑动效果，同时保持overflow属性的正常工作。 本文将详细讲解代码修改示例，助您轻松解决此问题。

探究overflow失效的根本原因

在div元素上绑定touchmove事件后，overflow属性失效的原因在于touchmove事件的特性：它会捕获整个元素的触摸移动事件，包括其内部元素，而非仅仅捕获溢出部分。 因此，当发生触摸移动时，overflow机制被touchmove事件所覆盖，导致溢出内容无法正常滚动。即使设置了height属性，也无法解决这个问题，因为overflow属性需要在正确的块级元素上下文中才能生效。

有效的解决方案

为了解决这个问题，建议采用一个独立的透明div作为触摸移动事件的监听目标，而不是直接在需要overflow效果的div上绑定touchmove事件。 这样，touchmove事件只作用于这个透明div，而不会影响目标div的overflow属性。

代码调整示例

HTML结构调整：

JavaScript代码修改 (move方法)：

move(e) {
  if (this.flags) {
    const objicon = document.getElementById('stretchbtn');
    const y = e.touches[0].clientY; // 获取触摸事件的Y坐标
    objicon.style.top = (this.ypum + y - this.startY) + "px"; // 根据触摸移动距离调整位置
  }
}

CSS样式调整：

.touch-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1999; /* 设置较高的z-index值 */
  background-color: transparent; /* 保持透明 */
  pointer-events: auto; /* 确保可以响应触摸事件 */
}

通过以上修改，touch-overlay div 将负责监听触摸移动事件，并通过JavaScript代码更新stretchbtn div 的位置，从而实现stretchbtn div 内溢出内容的滚动效果，同时保持overflow属性的有效性。 请注意，需要根据实际情况调整z-index值，确保透明层位于目标div之上。 此外，this.startY需要在touchstart事件中获取初始触摸位置的Y坐标。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~