javascript - 如何在手机上禁止浏览器的网页滚动-PHP中文网问答

讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

最近更新

javascript - 如何在手机上禁止浏览器的网页滚动

PHP中文网 2017-04-10 13:10:11

[JavaScript讨论组]

2480

怎么写javascript和html才能禁止网页的上下，左右滚动啊，是在手机浏览器上，onmousewheel=“return false”在PC上有用，但在手机上没用，，用jquery mobile写可以吗？。。急求~~来个实际操作过的大神啊~~

PHP中文网

认证高级PHP讲师

全部回复(12)

PHP中文网2017-04-10 13:12:11 12楼

你找的是這個嗎？

CSS

overflow: hidden

赞 +0

添加回复

怪我咯2017-04-10 13:12:11 11楼

一种方法：

html头部添加

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

然后将页面body的高度设为window的高度

 $("body").height( $(window).height() );

其他方法

页面高度超过设备可见高度时，阻止掉touchmove事件。

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

赞 +0

添加回复

天蓬老师2017-04-10 13:12:11 10楼

我们都用这个overflow:hidden

赞 +0

添加回复

PHPz2017-04-10 13:12:11 9楼

加监听事件touchmove,touchstart

赞 +0

添加回复

黄舟2017-04-10 13:12:11 8楼

头部：

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

CSS：

html,body{height:100%;overflow:hidden;}

赞 +0

添加回复

PHP中文网2017-04-10 13:12:11 7楼

document.addEventListener('touchmove', function(event) {
    if(event.target.type == 'range') return;
    event.preventDefault();
})

赞 +0

添加回复

黄舟2017-04-10 13:12:11 6楼

有个问题,就是使用

document.body.addEventListener('touchmove', function (event) {
event.preventDefault(); }, false);
怎么取消?就算使用了移除事件,或者返回真,都没办法再让页面滚动...有点郁闷.- -
都怪自己太笨...想了下,在阻止默认事件里面加个多条件

javascriptdocument.addEventListener('touchmove', function(event) {
            //判断条件,条件成立才阻止背景页面滚动,其他情况不会再影响到页面滚动
            if(!$(".mask-photo").is(":hidden")){
                event.preventDefault();
            }
        })

赞 +0

添加回复

大家讲道理2017-04-10 13:12:11 5楼

document.body.addEventListener('touchmove'......

为什么要给body呢？给弹出层就好了

赞 +0

添加回复

怪我咯2017-04-10 13:12:11 4楼

用$("body").bind("touchmove",function(event){event.preventDefault;//code});取消了body的拖动事件。

恢复这个拖动事件只要$("body").unbind("touchmove");

非常实用。

赞 +0

添加回复

大家讲道理2017-04-10 13:12:11 3楼

阻止默认
$("body").on("touchmove",function(event){
event.preventDefault;
}, false)

然后点击取消或者确定时再取消body上的绑定
$("body").off("touchmove")；

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>