参考: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. delphi mysql

    Delphi2006连接Mysql5.1 2.DBExpress+dbxopenmysql50.dll可能很多人会奇怪,dbxopenmysql50.dll是什么东东?DBExpress不就是数据库连 ...

  2. NX二次开发-UFUN重命名工程图UF_DRAW_rename_drawing

    NX9+VS2012 #include <uf.h> #include <uf_draw.h> #include <uf_part.h> UF_initialize ...

  3. Day 13 : 函数递归,

    从前有有座山,山里有座庙,庙里有个老和尚给小和尚们讲故事,讲的什么呀,讲的是,从前有有座山,山里有座庙,庙里有个老和尚给小和尚们讲故事,讲的什么呀?讲的是?...... 递归:1.一个函数再内部调用了 ...

  4. Python中and_Or

    自 http://www.cnblogs.com/BeginMan/p/3197123.html 一.and: 在Python 中,and 和 or 执行布尔逻辑演算,如你所期待的一样,但是它们并不返 ...

  5. Milking Cows /// 区间计数 离散化排序 oj10105

    题目大意: 输入n  接下来描述1~n位农夫挤牛奶的开始与结束时间   Sample Input 3300 1000700 12001500 2100 Sample Output 900 300 注意 ...

  6. Maven IntelliJ IDEA设置

    参考:博客地址: https://blog.csdn.net/huo920/article/details/82082403 Maven常用配置 在配置之前请将JDK安装好. 1. 环境变量配置 添加 ...

  7. Linux 系统版本查询命令

    .# uname -a (Linux查看版本当前操作系统内核信息) .# cat /proc/version (Linux查看当前操作系统版本信息) .# cat /etc/issue 或 cat / ...

  8. 关于用Linux桌面版当工作系统这件事

    Linux稳定性好,Linux软件开放--不过等到决定把Linux当作日常工作用系统时,就一言难尽了-- 我日常工作的需求有: 笔记本扩展屏幕 Golang开发 docker/kubernetes 输 ...

  9. The Counting Problem

    The Counting Problem 询问区间\([a,b]\)中\(1\sim 9\)出现的次数,0 < a, b < 100000000. 解 显然为数位递推,考虑试填法,现在关键 ...

  10. Largest Submatrix

    Largest Submatrix 给出一个\(n\times m\)的网格,网格里只放有字符a,b,c,d,w,x,,z,现在你可以将其中的w换成a,b,把x换成b,c,把y换成a,c,把z换成a, ...