禁止移动端页面随手指滑动

发表于 更新于 分类于 ， 本文字数： 165 阅读时长 ≈ 1 分钟

一、问题

在你使用 Wechat 或 QQ 自带的浏览器打开网页时，你会发现向上滑动时页面正常，但你向下滑动时会出现软件自带的功能，这时我们想禁止页面移动来固定页面，可以使用下面代码实现

二、解决代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var mo = function (e) {
    e.preventDefault();
};
function stop() {
    document.body.style.overflow = 'hidden'; // 隐藏滚动条
    document.addEventListener("touchmove", mo, {
        passive: false
    }); //禁止页面滑动
}
//直接默认不让滑动
stop();

// 允许滑动
function move(){
        document.body.style.overflow=''; // 显示滚动条
        document.removeEventListener("touchmove",mo,{passive:false});       
}

三、实际应用

Art-Time 艺术时间

简易画板，可用于日常涂鸦，计算，草稿等

https://layouwen.github.io/Art-Time/index.html