PC上css控制滚动仅css("overflow","hidden")已足够。

但是,如果在Mobile上还是可以拖动的!所以需要监听touchmove事件。

页面禁止拖动、滚动:

$("html,body").css("overflow","hidden").css("height","100%");
document.body.addEventListener('touchmove', self.welcomeShowedListener, false);

恢复页面拖动、滚动:

$("html,body").css("overflow","").css("height","");
document.body.removeEventListener('touchmove', detail.welcomeShowedListener, false);

参考:

在移动端设置overflow:hidden为什么页面还能滚?要怎么禁止

移动端的touch事件处理

addEventListener()与removeEventListener() 用法详解

移动端禁止页面拖动 h5禁止拖动页面的更多相关文章

  1. bootsrtap h5 移动版页面 在苹果手机ios滑动上下拉动滚动卡顿问题解决方法

    bootsrtap h5 移动版页面 在苹果手机ios滑动上下拉动滚动卡顿问题解决方法 bootsrtap框架做的h5页面,在android手机下没有卡顿问题,在苹果手机就一直存在这问题,开始毫无头绪 ...

  2. js 禁止右击保存图片,禁止拖拽图片

    禁止鼠标右键保存图片 <img src="" oncontextmenu="return false;"> 禁止鼠标拖动图片 <img src ...

  3. 基于react hooks,zarm组件库配置开发h5表单页面

    最近使用React Hooks结合zarm组件库,基于js对象配置方式开发了大量的h5表单页面.大家都知道h5表单功能无非就是表单数据的收集,验证,提交,回显编辑,通常排列方式也是自上向下一行一列的方 ...

  4. PC端和手机访问调用不同的页面,JS和PHP不同方法

    js方法: var urlqr = location.href;    urlqr = urlqr.replace(/iphoneF_/, "pc")这里写正则替换页面地址 if( ...

  5. HTML,JS禁止鼠标右键、禁止全选、复制、粘贴的方法

    禁止鼠标右键.禁止全选.复制.粘贴: oncontextmenu事件禁用右键菜单: js代码: document.oncontextmenu = function(){ event.returnVal ...

  6. APP中的 H5和原生页面如何分辨、何时使用

    一.APP内嵌H5和原生的区别 1.原生的页面运行速度快,比较流畅. H5页面相对原生的运行性能低,特别是一些动画效果有明显卡顿. 2.H5页面的很多交互都没有原生的好,比如弹层.输入时候的页面滑动 ...

  7. 实现可调整宽高的DIV(左右拖动和上下拖动)

    前言 本例是在React中实现,不过改一改通过原生js也很好实现,另外兼容性也做到了IE9.(IE8讲道理也是可以的). 首先看一下需要实现的需求: 要拖动图中的白色横条调整绿色和蓝色区域的高度,要拖 ...

  8. Hybrid App中原生页面 VS H5页面(分享)

    本文部分转自  http://www.jianshu.com/p/00ff5664e000 现有3类主流APP,分别为:Web App.Hybrid App(混合模式移动应用,Hybrid有“混合的” ...

  9. APP中的 H5和原生页面如何分辨?

    一.APP内嵌H5和原生的区别 1.原生的页面运行速度快,比较流畅.H5页面相对原生的运行性能低,特别是一些动画效果有明显卡顿. 2.H5页面的很多交互都没有原生的好,比如弹层.输入时候的页面滑动 等 ...

随机推荐

  1. 2017Nowcoder Girl D - 打车

    题目描述 妞妞参加完Google Girl Hackathon之后,打车回到了牛家庄. 妞妞需要支付给出租车司机车费s元.妞妞身上一共有n个硬币,第i个硬币价值为p[i]元. 妞妞想选择尽量多的硬币, ...

  2. Linux学习之进程管理(十九)

    Linux学习之进程管理 进程查看 查看系统中所有进程,使用BSD操作系统的格式 语法:ps aux 选项: a:显示所有前台进程 x:显示所有后台进程 u:显示这个进程是由哪个用户产生的 语法:ps ...

  3. 不一样的go语言-error

    前言   go语言的error处理方式,在目前流行的编程语言中属于刺头.似乎天生就是用来有别于他人标记.TIOBE排行榜全十除了C语言,无一例外是try catch的阵营.而排在go之前的语言除了C与 ...

  4. python 词云小demo

    词云小demo jiebawordcloud 一 什么是词云? 由词汇组成类似云的彩色图形.“词云”就是对网络文本中出现频率较高的“关键词”予以视觉上的突出,形成“关键词云层”或“关键词渲染”,从而过 ...

  5. Web API之indexedDB和Web SQL

    Web SQL已经被W3C废弃了,下面主要学下indexedDB. 一.参考链接 https://w3c.github.io/IndexedDB/

  6. Nagios安装与配置

    安装包获取 Nagios https://sourceforge.net/projects/nagios/files/ Nagios Plugins https://www.nagios.org/do ...

  7. BZOJ.2159.Crash的文明世界(斯特林数 树形DP)

    BZOJ 洛谷 挺套路但并不难的一道题 \(Description\) 给定一棵\(n\)个点的树和\(K\),边权为\(1\).对于每个点\(x\),求\(S(x)=\sum_{i=1}^ndis( ...

  8. BZOJ.3307.雨天的尾巴(dsu on tree/线段树合并)

    BZOJ 洛谷 \(dsu\ on\ tree\).(线段树合并的做法也挺显然不写了) 如果没写过\(dsu\)可以看这里. 对修改操作做一下差分放到对应点上,就成了求每个点子树内出现次数最多的颜色, ...

  9. go channel tips

    一.只有一个goroutine时,读写阻塞的chan会出错(“fatal error: all goroutines are asleep - deadlock!”).包括未make的chan(cha ...

  10. 解决IDEA Springboot项目sql文件打开提示No data sources are configured to run this SQL and provide advanced的问题

    Idea2018的Springboot项目,如果里面有.sql文件,打开后,会提示"No data sources are configured to run this SQL and pr ...