移动端之开启和禁止页面滚动

在做移动端页面是,有个操作需要禁止页面的滚动,故学习了原生js的操作

function handler(ev){
    ev.preventDefault();
}
// 禁止页面滚动
document.body.addEventListener('touchmove', handler, { passive: false });
  • passive:false。 设置该属性的目的主要是为了在阻止事件默认行为导致的卡顿。等待监听器的执行是耗时的,有些甚至耗时很明显,这样就会导致页面卡顿。即便监听器是个空函数,也会产生一定的卡顿,毕竟空函数的执行也会耗时。加上{ passive: false }能防止页面卡顿。
// 开启页面滚动
document.body.removeEventListener('touchmove', handler, { passive: false });
// 开启页面滚动
document.body.addEventListener('touchmove', function(ev){
    ev.preventDefault();
}, { passive: false });
  • 添加和移除的函数对象应该是同一个,否则移除不起作用,即listener不能直接用匿名函数
原文链接:segmentfault.com

上一篇:Lodash笔记 chunk
下一篇:GitHub 吸星大法 - 一年收获 2000+ Star 的心得

相关推荐

  • (详解)从浏览器输入 URL 到页面展示过程

    引言 对于面试常问的从浏览器输入 URL 到页面渲染过程发生了什么?,我想大家都或多或少能说出一二。但是,其实这个问题很有深度,而你是否回答的有深度,在很大程度上会影响到面试官对你的印象。

    2 个月前
  • 高德地图+vue实现页面点击绘制多边形及多边形切割拆分

    最终效果 (/public/upload/7732e1e729bfcd99f99f56cd04ac17b1) 技术栈 项目中使用到的技术 高德基于vue的vueamap,组件使用的elemen...

    8 天前
  • 项目中的导航栏搜索及搜索页面的思路

    项目背景 今天项目里的实习生在做搜索功能时,导航栏的搜索框与搜索页面的搜索框,在内容上竟然是各自独立的。。。。。 无论他怎么鼓捣,在搜索栏上进行搜索,搜索页面都没有任何反应。

    1 个月前
  • 页面间通信--使用storage事件保持多tab页共享轮询请求的数据

    业务场景 最近接到一个优化需求,某页面会轮询请求两个接口获取未读消息的数量,但是当用户同时在多个tab打开了页面的话,这些页面都会进行轮询请求,有用户打开tab页太多,1分钟请求了几千次,触发了风控,...

    9 天前
  • 页面进入后台如何关闭背景音乐

    之前在做小程序的时候遇到一个问题:小程序中有一个webview页面,这个页面中用iframe嵌套了一个H5页面,这个H5页面中有背景音乐,背景音乐播放的情况下,点击小程序右上角退出的小圆圈背景音乐仍然...

    10 个月前
  • 页面跳转的归纳

    前端工作有很多地方需要页面跳转,有很多种实现方法,这里做一下归纳。 HTML标签 一般形式上可以用target="blank": 历史跳转 ...

    2 年前
  • 页面跳转时,点击上报丢失问题解析

    背景 最近在工作中,遇到了页面跳转时点击上报丢失的问题,突出表现在微信ios的webview上,上报后直接跳转的失败率达到了惊人的93%。喝口水压压惊,开始逐步分析问题的发生。

    2 年前
  • 页面跳转中的安全问题

    最近参与了一小部分安全排查,涉及到一些前端编码安全问题,记个小tip。 1.Http请求头中的Referer 0a2b525c5fc64af362821115x362.png@900090f.p...

    6 个月前
  • 页面负载启动自举模型

    zanzuBrandon(https://stackoverflow.com/users/4398000/zanzu)提出了一个问题:Launch Bootstrap Modal on page lo...

    2 年前
  • 页面简单布局

    下面是一个简单的页面布局。注意发现页面的布局特点,注意使用居中,浮动等。 结果: image.png(/public/upload/2eebdd74298e13c7103ee3094697...

    2 个月前

官方社区

扫码加入 JavaScript 社区