js移动端禁止左右滑动

在JavaScript中，如果你想在移动端页面上禁止左右滑动，可以通过以下几种方法实现：

基础概念

触摸事件：移动设备上的触摸事件包括touchstart、touchmove、touchend等。
事件阻止默认行为：通过调用event.preventDefault()方法可以阻止事件的默认行为。

实现方法

方法一：使用CSS

通过设置overflow属性为hidden，可以禁止页面的滚动。

body {
    overflow: hidden;
    position: fixed; /* 防止页面跳动 */
    width: 100%;
}

方法二：使用JavaScript监听触摸事件

通过监听touchmove事件并阻止其默认行为，可以实现禁止左右滑动。

document.addEventListener('touchmove', function(event) {
    event.preventDefault();
}, { passive: false });

注意：在某些浏览器中，默认情况下touchmove事件是被动（passive）的，这意味着不能调用preventDefault()。因此，需要显式设置{ passive: false }。

方法三：条件性阻止滚动

如果你只想在特定条件下禁止滚动（例如某个弹窗出现时），可以这样做：

let disableScroll = false;

function preventDefault(e) {
    e.preventDefault();
}

function enableScroll() {
    document.removeEventListener('touchmove', preventDefault, { passive: false });
    disableScroll = false;
}

function disableScroll() {
    document.addEventListener('touchmove', preventDefault, { passive: false });
    disableScroll = true;
}

// 使用示例
document.getElementById('popupButton').addEventListener('click', function() {
    if (disableScroll) {
        enableScroll();
    } else {
        disableScroll();
    }
});