在移动端开发中，为元素添加touchmove事件后，overflow属性失效的情况时有发生。这是因为touchmove事件阻止了overflow属性对元素内容的滚动控制。
解决方案：使用透明遮罩层
为了解决这个问题，可以创建一个透明的div作为遮罩层，放置在需要移动的元素上方，并将touchmove事件绑定到这个遮罩层上。通过修改遮罩层的位置来间接控制目标元素的位置，从而避免touchmove事件直接影响目标元素的overflow属性。
代码示例:
HTML结构:
JavaScript代码:
move(e) {
if (this.flags) {
const element = document.getElementById('movable-element');
const overlay = e.target; // e.target 指向 overlay 元素
const y = this.ypum; // 假设 this.ypum 包含新的垂直位置
overlay.style.top = y + "px";
element.style.top = y + "px"; // 更新可移动元素的位置
}
},
CSS样式:
.container {
position: relative; /* 确保 overlay 元素可以正确定位 */
overflow: auto; /* 设置容器的滚动属性 */
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0); /* 透明背景 */
z-index: 1999; /* 确保遮罩层在最上层 */
}
.movable-element {
position: absolute; /* 允许通过 JavaScript 修改位置 */
overflow: auto; /* 设置可移动元素的滚动属性 */
}
通过这种方法，touchmove事件绑定在透明的遮罩层上，而可滚动元素的overflow属性可以正常工作，实现预期效果。 请注意，代码示例中的this.ypum和this.flags需要根据实际项目情况进行调整。
