时间戳

首页 > 解决方案 > 防止网页在移动设备的触摸输入上滚动

javascript - 防止网页在移动设备的触摸输入上滚动

问题描述

我正在为我的图形设计组合创建一个模拟操作系统（从图形上讲）的网站 - http://dreamstate.graphics/。这意味着我需要我的几个元素是可拖动的。在台式计算机上一切正常，但是在移动设备上，用户无法在不滚动整个网站的情况下拖动元素。

点击元素作为点击事件可以正常工作，因此该网站并非无法使用，但我希望能够通过触摸输入进行拖动。我知道这已经被问过很多次了，但是，没有一个解决方案对我有用，我完全迷失了。

我尝试过的/我的设置

在 CSS 中，我隐藏了溢出并将位置固定在我的容器元素和主体上：

body, html {
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

在 Javascript 中，我阻止了 touchmove 的默认功能：

document.addEventListener("touchmove", function(e) {
  e.preventDefault()
}, {
  passive: false
});

如果我将事件侦听器上的调用函数更改为alert("it works")，我不会收到警报，因此它可能touchmove无论如何都不会检测到事件。我确实有视频叠加层，但它们设置为touch-action: none;.

我在这里做错了什么，如何防止滚动干扰触摸功能？

标签： javascripthtmlcsswebscroll

解决方案

需要处理 3 个事件：“touchstart”、“touchmove”和“touchend”。

.addEventListener('touchstart', function(e){e.preventDefault();...});
.addEventListener('touchmove', function(e){e.preventDefault();...});
.addEventListener('touchend', function(e){e.preventDefault();...});

推荐阅读