参考:https://blog.csdn.net/huangfu_chunfeng/article/details/46429997
         https://www.cnblogs.com/wxcbg/p/10452985.html
         https://blog.csdn.net/weixin_40126227/article/details/80858990
         https://blog.csdn.net/lyy_666/article/details/82185248

方法一:IOS允许滚动会无效

function scrControl(t){
if(t == 0){ //禁止滚动
document.body.addEventListener('touchmove', function (e) {
e.preventDefault();
}, { passive: false }); //passive 参数不能省略,用来兼容ios和android
}else if( t == 1){ //允许滚动
document.body.addEventListener('touchmove', function (e) {
e.returnValue = true;
}, {passive: false});
}
}

passive,设置该属性的目的主要是为了在阻止事件默认行为导致的卡顿。等待监听器的执行是耗时的,有些甚至耗时很明显,这样就会导致页面卡顿。即便监听器是个空函数,也会产生一定的卡顿,毕竟空函数的执行也会耗时。加上{ passive: false }能防止页面卡顿。

可以通过传递 passive 为 true 来明确告诉浏览器,事件处理程序不会调用 preventDefault 来阻止默认滑动行为。
如果设置了passive为true,同时又阻止默认行为,阻止是不生效的。

document.addEventListener("touchmove", function(event) {
event.preventDefault() //不产生作用
}, {passive: true});

方法二:兼容IOS

function bodyScroll(event){
event.preventDefault();
} function scrControl(t){
if(t == 0){ //禁止滚动
document.body.addEventListener('touchmove', this.bodyScroll, { passive: false });
}else if( t == 1){ //开启滚动
document.body.removeEventListener('touchmove',this.bodyScroll, {passive: false});
}
}

js 禁止/允许页面滚动的更多相关文章

  1. js禁止浏览器页面后退功能

    js禁止浏览器页面后退功能: <script> $(function(){ ) { //防止页面后退 history.pushState(null, null, document.URL) ...

  2. js禁止复制页面文字

    做项目的时候有客户提出要求,不能用用户浏览他发表的文章时复制他的文章 一种比较简单的方法,禁止用户选中页面的文字和禁止用户右键菜单 document.oncontextmenu = new Funct ...

  3. aos.js超赞页面滚动元素动画jQuery动画库

    插件描述:aos.js 是一款效果超赞的页面滚动元素动画jQuery动画库插件.该动画库可以在页面滚动时提供28种不同的元素动画效果,以及多种easing效果.在页面往回滚动时,元素会恢复到原来的状态 ...

  4. 使用JS方法使页面滚动到指定元素+优化+API介绍(动画)

    前言 当页面最上部有顶部菜单是,使用锚点跳转的方法很容易挡住想要呈现的内容(如下图技能两个字被挡住了一半),为避免出现这样的问题,故滚动到指定元素使用用JS的方法来实现. 目录 使用的API简介 初版 ...

  5. 【VUE/JS】vue和js禁止浏览器页面后退

    1.vue 禁止浏览器后退需求是:需要某个路由不能通过浏览器返回,同时不影响相互之间的切换整理一下解决方法 和 使用方法: 1.在路由配置中给这个路由添加meta信息,比如: { path: '/ho ...

  6. JS禁止WEB页面鼠标事件大全

    <!--禁止鼠标右键代码-->:<noscript><ifra:<scriptlanguage=javas:<!--:if(window.Event):doc ...

  7. animate.css配合wow.min.js实现各种页面滚动效果

    有的页面在向下滚动的时候,有些元素会产生细小的动画效果.虽然动画比较小,但却能吸引你的注意.比如刚刚发布的 iPhone 6 的页面(查看).如果你希望你的页面也更加有趣,那么你可以试试 WOW.js ...

  8. JS监听页面滚动到底部事件

    废话不说,直接上代码,放心我这个是最好的,直接放到js脚本里,直接生效: $(window).scroll(function(){ var scrollTop = $(this).scrollTop( ...

  9. CSS scroll-behavior和JS scrollIntoView让页面滚动平滑

    转自 https://www.zhangxinxu.com/wordpress/2018/10/scroll-behavior-scrollintoview-%E5%B9%B3%E6%BB%91%E6 ...

随机推荐

  1. 排列+函数映射——hdu6038好题

    /* 引理:[0,n-1]的排列,i向a[i]连边,那么每个数必定在一个环中 所以数组a可以分割成一些环,数组b也可以分割成一些环 先讨论a的一个环 a[a1]=a2 a[a2]=a3 a[a3]=a ...

  2. 43 编译原理及cmake使用手册学习

    0 引言 大量开源库需要通过cmake编译后使用,了解cmake的基本指令以及CMakeLists.txt的写法非常重要,其基础是了解编译原理.另外,为了对cmake编译的代码进行调试,需要了解CMa ...

  3. [JZOJ 5819] 大逃杀

    题意:求一个树上背包~~ 先贴代码存一下,好像打挂了. #include <bits/stdc++.h> using namespace std; const int maxn = 400 ...

  4. servlet和servlet-mapping的作用

    转载:https://www.jianshu.com/p/6dadc489969a 某个工程的 web.xml 文件片段:   执行顺序 访问顺序为1—>2—>3—>4,其中2和3的 ...

  5. 学习笔记——CDQ分治

    再次感谢这位大佬的博客:https://www.cnblogs.com/ljc20020730/p/10395866.html CDQ分治,是一种在分治合并中计算前面值对后面答案的贡献的一种算法.今天 ...

  6. 使用python和tushare股票交易日历数据,判断节假日周末休市

    接口:trade_cal 描述:获取各大交易所交易日历数据,默认提取的是上交所 注:tushare模块下载和安装教程,请查阅我之前的文章 输入参数 名称       |       类型        ...

  7. ASP.NET MVC easyUI-datagrid 分页

    本文写的是最简单的 按照API文档来写的分页.就是插件自带的分页效果. 一.html代码:field就是代表你后台数据的对应的列名. <table id="dg" class ...

  8. innodb 表

    1.innodb的存储引擎表类型 如果在创建表时没有显示的定义主键,则innodb存储引擎会按如下方式选择或创建主键 a.首先表中是否有非空的唯一约束(Unique not null)如果有,则该列即 ...

  9. Android开发 MediaPlayer播放raw资源MP3文件

    代码 private MediaPlayer mRingPlayer; /** * 播放铃声 */ private void startRing(){ if (mRingPlayer != null) ...

  10. Android 开发 框架系列 OkHttp文件上传功能实现(含断点续传)

    前言 此篇博客只是上传功能的记录demo,如果你还不太了解okhttp可以参考我的另一篇博客https://www.cnblogs.com/guanxinjing/p/9708575.html 代码部 ...