雷达智富

首页 > 内容 > 程序笔记 > 正文

程序笔记

禁用移动端左滑

2024-07-10 29

禁用移动端左滑通常需要使用JavaScript来阻止默认的滑动行为。你可以在需要禁用左滑的元素上添加事件监听器,然后阻止滑动的默认行为。下面是一个示例代码:

// 获取需要禁用左滑的元素,比如一个具有特定class的div
var element = document.getElementById('yourElementId');

// 添加touchstart事件监听器
element.addEventListener('touchstart', handleTouchStart, false);

var xStart = null;

function handleTouchStart(event) {
    xStart = event.touches[0].clientX;
    element.addEventListener('touchmove', handleTouchMove, false);
}

function handleTouchMove(event) {
    if (!xStart) {
        return;
    }

    var xDiff = xStart - event.touches[0].clientX;

    // 如果左滑,阻止默认滑动行为
    if (xDiff > 0) {
        event.preventDefault();
    }

    xStart = null;
    element.removeEventListener('touchmove', handleTouchMove, false);
}

这段代码会阻止具有特定ID的元素(通过替换 getElementById 中的 'yourElementId')在移动端上的左滑行为。请确保在需要禁用左滑的元素上正确应用此代码,并进行适当的测试,因为移动设备的行为可能有所不同。

更新于:2个月前
赞一波!4

文章评论

全部评论