移动端禁止页面拖动 h5禁止拖动页面
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为什么页面还能滚?要怎么禁止
addEventListener()与removeEventListener() 用法详解
移动端禁止页面拖动 h5禁止拖动页面的更多相关文章
- bootsrtap h5 移动版页面 在苹果手机ios滑动上下拉动滚动卡顿问题解决方法
bootsrtap h5 移动版页面 在苹果手机ios滑动上下拉动滚动卡顿问题解决方法 bootsrtap框架做的h5页面,在android手机下没有卡顿问题,在苹果手机就一直存在这问题,开始毫无头绪 ...
- js 禁止右击保存图片,禁止拖拽图片
禁止鼠标右键保存图片 <img src="" oncontextmenu="return false;"> 禁止鼠标拖动图片 <img src ...
- 基于react hooks,zarm组件库配置开发h5表单页面
最近使用React Hooks结合zarm组件库,基于js对象配置方式开发了大量的h5表单页面.大家都知道h5表单功能无非就是表单数据的收集,验证,提交,回显编辑,通常排列方式也是自上向下一行一列的方 ...
- PC端和手机访问调用不同的页面,JS和PHP不同方法
js方法: var urlqr = location.href; urlqr = urlqr.replace(/iphoneF_/, "pc")这里写正则替换页面地址 if( ...
- HTML,JS禁止鼠标右键、禁止全选、复制、粘贴的方法
禁止鼠标右键.禁止全选.复制.粘贴: oncontextmenu事件禁用右键菜单: js代码: document.oncontextmenu = function(){ event.returnVal ...
- APP中的 H5和原生页面如何分辨、何时使用
一.APP内嵌H5和原生的区别 1.原生的页面运行速度快,比较流畅. H5页面相对原生的运行性能低,特别是一些动画效果有明显卡顿. 2.H5页面的很多交互都没有原生的好,比如弹层.输入时候的页面滑动 ...
- 实现可调整宽高的DIV(左右拖动和上下拖动)
前言 本例是在React中实现,不过改一改通过原生js也很好实现,另外兼容性也做到了IE9.(IE8讲道理也是可以的). 首先看一下需要实现的需求: 要拖动图中的白色横条调整绿色和蓝色区域的高度,要拖 ...
- Hybrid App中原生页面 VS H5页面(分享)
本文部分转自 http://www.jianshu.com/p/00ff5664e000 现有3类主流APP,分别为:Web App.Hybrid App(混合模式移动应用,Hybrid有“混合的” ...
- APP中的 H5和原生页面如何分辨?
一.APP内嵌H5和原生的区别 1.原生的页面运行速度快,比较流畅.H5页面相对原生的运行性能低,特别是一些动画效果有明显卡顿. 2.H5页面的很多交互都没有原生的好,比如弹层.输入时候的页面滑动 等 ...
随机推荐
- KMP算法2
给定一个主串s,一个子串sub,将主串中的所有子串替换成replaceStr,并将最终结果输出来. #include<stdio.h> #include<string.h> # ...
- css3流动布局
-webkit-box-ordinal-group: 2;1...布局优先显示 display: -webkit-box;盒子 -webkit-box-orient:horizontal;显示方式 - ...
- Gym 102091L Largest Allowed Area 【二分+二维前缀和】
<题目链接> 题目大意:给你一个由01组成的矩形,现在问你,该矩形中,最多只含一个1的正方形的边长最长是多少. 解题分析: 用二维前缀和维护一下矩形的01值,便于后面直接$O(1)$查询任 ...
- linux抓包工具Charles的配置安装
1. 安装 (不赘述,方法很多,我使用yaourt charles安装) 2. 导出证书,crt格式保存备用 3. 浏览器导入证书 4. 浏览器设置代理
- shiro学习总结(一)----初识shiro
本系列内容大多总结自官网和张开涛的<跟我学Shiro> 一.shiro简介 1.1.shiro有什么用? shiro是一个功能强大使用简单的java安全框架,主要提供了五大功能: 1.认证 ...
- emoji
嗯...闲的... emoji:(博客园的markdown支持emoji编码...惊了) http://getemoji.com/ http://www.fhdq.net/emoji/emojifuh ...
- Spring AOP 配置通知方法的时候如何处理方法重载
如何在method属性里指定重载方法中的某一个?
- ajax中的async属性值之同步和异步及同步和异步区别
jquery中ajax方法有个属性async用于控制同步和异步,默认是true,即ajax请求默认是异步请求,有时项目中会用到AJAX同步.这个同步的意思是当JS代码加载到当前AJAX的时候会把页面里 ...
- Charles——前端必备模拟后端数据
Charles--前端必备模拟后端数据 现在都是前后端分离开发了,前端开发者经常会遇到一个问题如何模拟后端数据来进行开发调试,在这里给大家介绍一个前端神器--Charles. 安装 安装就不赘述了,直 ...
- Drying [POJ3104] [二分答案]
背景 每件衣服都有一定单位水分,在不适用烘干器的情况下,每件衣服每分钟自然流失1个单位水分,但如果使用了烘干机则每分钟流失K个单位水分,但是遗憾是只有1台烘干机,每台烘干机同时只能烘干1件衣服,请问要 ...