参考: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. JavaScript做个时间表 Date()

    <span id="shiji"></span><script> window.setInterval("time()",5 ...

  2. NX二次开发-UFUN获取显示在NX交互界面的对象UF_OBJ_is_displayable

    NX9+VS2012 #include <uf.h> #include <uf_disp.h> #include <uf_obj.h> #include <u ...

  3. inobounce.js : 禁止IOS H5的滑动回弹

    IOS的移动端/H5/webapp 页面如果滚动到底部或者在页面顶部再往上拉,都会出现一个回弹的效果. 想取消这个效果可以引入一个简单的库就行,不用再写繁琐的样式. github地址 直接引入就行 & ...

  4. 李宏毅机器学习课程---4、Gradient Descent (如何优化 )

    李宏毅机器学习课程---4.Gradient Descent (如何优化) 一.总结 一句话总结: 调整learning rates:Tuning your learning rates 随机Grad ...

  5. LeetCode 746. Min Cost Climbing Stairs (使用最小花费爬楼梯)

    题目标签:Dynamic Programming 题目给了我们一组 cost,让我们用最小的cost 走完楼梯,可以从index 0 或者 index 1 出发. 因为每次可以选择走一步,还是走两步, ...

  6. AtCoder ABC 126F XOR Matching

    题目链接:https://atcoder.jp/contests/abc126/tasks/abc126_f 题目大意 给定两个整数 M 和 K ,用小于 2M 的的所有自然数,每个两个,用这些数排成 ...

  7. jquery操作html元素之(添加元素)

    添加新的 HTML 内容 我们将学习用于添加新内容的四个 jQuery 方法: append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在 ...

  8. php连接docker启动的mysql容器报错:(HY000/2002): Connection refused的解决办法

    vim libraries/config.default.php 查找到localhost/127.0.0.1字符[一般来说默认都是localhost] :/localhost 替换成容器名,例如我定 ...

  9. Markdown文档常用字体及颜色设置

    1.字体.字号.颜色设置 <font face="微软雅黑" >微软雅黑字体</font> <font face="黑体" > ...

  10. springboot项目大量打印debug日志问题

    目前,java下应用最广泛的日志系统主要就是两个系列: log4j和slf4j+logback . 其中,slf4j只包含日志的接口,logback只包括日志的具体实现,两者加起来才是一个完整的日志系 ...