js 禁止/允许页面滚动
参考: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 禁止/允许页面滚动的更多相关文章
- js禁止浏览器页面后退功能
js禁止浏览器页面后退功能: <script> $(function(){ ) { //防止页面后退 history.pushState(null, null, document.URL) ...
- js禁止复制页面文字
做项目的时候有客户提出要求,不能用用户浏览他发表的文章时复制他的文章 一种比较简单的方法,禁止用户选中页面的文字和禁止用户右键菜单 document.oncontextmenu = new Funct ...
- aos.js超赞页面滚动元素动画jQuery动画库
插件描述:aos.js 是一款效果超赞的页面滚动元素动画jQuery动画库插件.该动画库可以在页面滚动时提供28种不同的元素动画效果,以及多种easing效果.在页面往回滚动时,元素会恢复到原来的状态 ...
- 使用JS方法使页面滚动到指定元素+优化+API介绍(动画)
前言 当页面最上部有顶部菜单是,使用锚点跳转的方法很容易挡住想要呈现的内容(如下图技能两个字被挡住了一半),为避免出现这样的问题,故滚动到指定元素使用用JS的方法来实现. 目录 使用的API简介 初版 ...
- 【VUE/JS】vue和js禁止浏览器页面后退
1.vue 禁止浏览器后退需求是:需要某个路由不能通过浏览器返回,同时不影响相互之间的切换整理一下解决方法 和 使用方法: 1.在路由配置中给这个路由添加meta信息,比如: { path: '/ho ...
- JS禁止WEB页面鼠标事件大全
<!--禁止鼠标右键代码-->:<noscript><ifra:<scriptlanguage=javas:<!--:if(window.Event):doc ...
- animate.css配合wow.min.js实现各种页面滚动效果
有的页面在向下滚动的时候,有些元素会产生细小的动画效果.虽然动画比较小,但却能吸引你的注意.比如刚刚发布的 iPhone 6 的页面(查看).如果你希望你的页面也更加有趣,那么你可以试试 WOW.js ...
- JS监听页面滚动到底部事件
废话不说,直接上代码,放心我这个是最好的,直接放到js脚本里,直接生效: $(window).scroll(function(){ var scrollTop = $(this).scrollTop( ...
- CSS scroll-behavior和JS scrollIntoView让页面滚动平滑
转自 https://www.zhangxinxu.com/wordpress/2018/10/scroll-behavior-scrollintoview-%E5%B9%B3%E6%BB%91%E6 ...
随机推荐
- lua数组和数据类型转换
一.lua数组 Lua数组大小不固定,下标是从 1开始. --数组 arr={"aaa","bbb","ccc"} --使用数值 for通 ...
- NX二次开发-UFUN工程图表格注释设置单元格首选项UF_TABNOT_set_cell_prefs
NX9+VS2012 #include <uf.h> #include <uf_tabnot.h> #include <NXOpen/Part.hxx> #incl ...
- Android 7.0 IMS框架详解
本文主要讲解IP Multimedia Subsystem (IMS)在Android 7.0上由谷歌Android实现的部分内容.从APP侧一直到Telephony Framework,是不区分CS ...
- 20140331 HOG代码调试 Boost库安装
1.CUDAHOG代码调试 错误1: 错误提示:(main.obj : error LNK2019: 无法解析的外部符号 "public: __thiscall cudaHOG::cudaH ...
- uoj21 【UR #1】缩进优化
题目 题意简介明了,需要找到一个\(T\),最小化 \[\sum_{i=1}^n\left \lfloor \frac{a_i}{T} \right \rfloor+\sum_{i=1}^na_i\% ...
- USACO2007 捕牛记 /// queue+桶 oj1503
题目大意: John和牛都站在一条直线上,开始时John位于坐标点N上( 0 ≤ N ≤ 100,000 ),牛位于坐标点K上( 0 ≤ K ≤ 100,000 ). John有两种行动方式:步行和瞬 ...
- Nginx配置web服务
Nginx配置虚拟主机 虚拟主机概述 所谓虚拟主机,在web服务里就是一个独立的网站站点,这个站点对应独立的域名(也可以是IP或者端口),具有独立的程序及资源目录,可以独立的对外提供服务,继而给用户访 ...
- 使用CSS为图片添加更多趣味的5种方法
使用Photoshop为每个图片添加某种样式虽然可行,但会是相当乏味且困难的长久工作.下面要介绍的CSS技巧将帮助你从痛苦中解脱出来! 阴影效果 通过使用带有一些padding之的背景图来添加阴影效果 ...
- 我也可以独立(引用JS外部文件)
我也可以独立(引用JS外部文件) 通过前面知识学习,我们知道使用<script>标签在HTML文件中添加JavaScript代码,如图: JavaScript代码只能写在HTML文件中吗? ...
- 前端常用的库和实用技术之JavaScript面向切面编程
Aspect Oriented Programming(AOP)面向切面编程是一个比较热门的话题. AOP主要实现的目的是针对业务处理过程中的切面进行提取,它所面对的是处理过程 中的某个步骤或阶段,以 ...