javascript移动端禁止页面滑动的解决方案
1 前言
移动端网页,发现ios平台的iphone或者ipad,网页可以上下左右移动,而Android版则不会。仅作为记录使用。
2 代码
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});
}
3 参考
1.移动端禁止页面滑动(有效)
4 扩展
2.webApp中防止页面出现上下滑动的方法(测试无效)
javascript移动端禁止页面滑动的解决方案的更多相关文章
- 【移动端】js禁止页面滑动与允许滑动
禁止页面滑动 通常静止滑动方案:(阻止滑动事件) window.ontouchmove=function(e){ e.preventDefault && e.preventDefaul ...
- H5禁止页面滑动/滚动
禁止页面滚动--完美解决方案,滚动条显示与否,手持设备兼容与否 禁止页面滚动 有三种方法 1,依靠css 将页面 document.documentElement.style.overflow='hi ...
- 常见的H5移动端Web页面Bug问题解决方案总汇
解决jquery ajax调用远程接口的跨域问题 首先,接口必须允许远程调用.这是后端或者运维的事情.你必须保证你得到的一个接口是允许远程调用的.否则,就没啥了. $.ajax({ type:'get ...
- 移动端禁止页面拖动 h5禁止拖动页面
PC上css控制滚动仅css("overflow","hidden")已足够. 但是,如果在Mobile上还是可以拖动的!所以需要监听touchmove事件. ...
- 移动端弹出层加遮罩后禁止body滑动
//实现滚动条无法滚动 var mo=function(e){e.preventDefault();}; /***禁止滑动***/ function stop(){ document.body.sty ...
- 移动端H5页面惯性滑动监听
移动端H5页面惯性滑动监听 在移动端,当你快速滑动有滚动条的页面时,当你手指离开屏幕时,滚动条并不会立即停止,而是会随着"惯性"继续滑动一段距离. 在做项目的过程中,需要监听惯性滑 ...
- 移动端web页面滚动不流畅,卡顿闪烁解决方案
移动端web页面滚动不流畅,卡顿闪烁解决方案 1.ios端的-webkit-overflow-scrolling属性可控制页面滚动效果,设置如下实现惯性滚动和弹性效果: -webkit-overf ...
- 用javascript实现禁止页面后退返回上一页的代码
用javascript实现禁止页面后退返回上一页的代码: 有时候我们需要用户在点击了如下一步的按钮时,页面跳转到了下一个页面,这时想不允许用户返回后退到上一页,可以采用下面的方法: 在需要跳转的页 ...
- 移动端vue页面禁止移动/滚动
当需要在移动端中禁止页面滚动,加入:@touchmove.prevent即可,例子如下 <template> <div @touchmove.prevent> <h3 c ...
随机推荐
- [Android] Android Studio 使用config.gradle统一管理项目的依赖库
gradle支持自定义config.gradle,在GoogleSamples中提到我们必须使用关键字ext(对应ExtraPropertitesExtension的实例)来定义动态属性 如何实现: ...
- 5年GTD自我管理经验,一块听听
我在胜利油田做了20多年的油田信息化工作,以前的我经常处于这样一种状态: 当我正在做着手边的一项事情时,头脑里却不断地蹦出来其它的事务,让我烦心不已,焦虑不安:PPT经常要拖到汇报当天的凌晨才做完,有 ...
- 开源ETL工具之Kettle介绍
What 起源 Kettle是一个Java编写的ETL工具,主作者是Matt Casters,2003年就开始了这个项目,最新稳定版为7.1. 2005年12月,Kettle从2.1版本开始进入了开源 ...
- SpringBoot系列: Actuator监控
Sprng Boot 2 actuator变动加大, 网上很多资料都都已经过期. ============================配置项============================ ...
- Kettle系列: 马进举开源的Kettle通用插件 KettleEasyExpand
扩展Kettle功能, 经常使用 user defined java class 组件, 或者自己开发Java插件. 两种方式都有各自的痛点: 1. 在user defined java class ...
- 微信小程序开发(2) 计算器
在这篇微信小程序开发教程中,我们将介绍如何使用微信小程序开发计算器功能. 本文主要分为两个部分,小程序主体部分及计算器业务页面部分 一.小程序主体部分 一个小程序主体部分由三个文件组成,必须放在项目的 ...
- Coursera, Deep Learning 5, Sequence Models, week2, Natural Language Processing & Word Embeddings
Word embeding 给word 加feature,用来区分word 之间的不同,或者识别word之间的相似性. 用于学习 Embeding matrix E 的数据集非常大,比如 1B - 1 ...
- 第28月第3天 c语言读写文件
1. int ConfigIniFile::OpenFile( const char* szFileName ) { FILE *fp; size_t nLen; int nRet; CloseFil ...
- linux系统下python升级安装
1.安装gcc gcc-c++ yum install -y gcc gcc-c++ #提前检查是否安装 2.下载python3.5.2安装包 cd /usr/local/src/ wget http ...
- jira安装插件svn
1.登录jira 2.设置-插件-查找新插件 搜索 Jira Subversion plugin 3.安装成功之后 4.关联svn仓库 5.关联成功