div设置touchmove事件后overflow失效是什么原因？-css教程-PHP中文网

div设置touchmove事件后overflow失效是什么原因？

心靈之曲

发布： 2025-02-22 15:28:20

原创

579人浏览过

div设置touchmove事件后overflow失效是什么原因？

探究overflow失效的根本原因

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

有效的解决方案

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

代码调整示例

Felvin

AI无代码市场，只需一个提示快速构建应用程序

161

查看详情

HTML结构调整：

<code class="html"><div>
  <div class="touch-overlay"></div>  <!-- 新增的透明层 -->
  <div class="stretchbtn" id="stretchbtn"></div>
</div></code>

登录后复制

JavaScript代码修改 (move方法)：

<code class="javascript">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"; // 根据触摸移动距离调整位置
  }
}</code>

登录后复制

CSS样式调整：

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

登录后复制

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

以上就是div设置touchmove事件后overflow失效是什么原因？的详细内容，更多请关注php中文网其它相关文章！