阻止页面滚动
[https://www.cnblogs.com/wxcbg/p/10452985.html](https://www.cnblogs.com/wxcbg/p/10452985.html)
~~~
// document.body.style.overflow="hidden";
// document.body.style.overflow="";
document.addEventListener('touchmove', function(e){
e .preventDefault();
}, {passive: false});
document.removeEventListener('touchmove', function(e){
e .preventDefault();
}, {passive: false});
~~~
*****
passive是干吗用的呢,设置该属性的目的主要是为了在阻止事件默认行为导致的卡顿。等待监听器的执行是耗时的,有些甚至耗时很明显,这样就会导致页面卡顿。即便监听器是个空函数,也会产生一定的卡顿,毕竟空函数的执行也会耗时。加上{ passive: false }能防止页面卡顿。
我们可以通过传递 passive 为 true 来明确告诉浏览器,事件处理程序不会调用 preventDefault 来阻止默认滑动行为。如果设置了passive为true,同时又阻止默认行为,阻止是不生效的
*****
**vue里面直接在html模板里处理:**
~~~
<div v-show="showSelect" class="bill_class" @touchmove.prevent>
//如果在这个div中滑动,触发的事件会经过showSelect,可以阻止被该弹框盖在下面的页面滑动
</div>
~~~
.prevent是VUE里的事件修饰符,用来阻止默认事件,相当于 event.preventDefault()
*pc端方案:*
这种屏蔽方式只是屏蔽了滑动,对于PC端的鼠标滚轮是无效的,但屏蔽鼠标滚轮也很简单,把 touchmove 事件处理器改成 scroll 事件的处理器就好了
~~~
<div class="overlayer" @scroll.prevent ></div>
~~~
- 序言
- 数据库操作
- 自定义数据操作
- DBCreate
- DBUpdate
- DBList
- DBDelete
- 事务
- 插入数据
- 更新数据
- 验证场景
- ✦事务队列✦
- DBWhere
- 分页
- 分类
- 新增分类
- 编辑分类
- 删除分类
- 分类数据
- Excel
- 数据验证
- 自定义验证类
- Where技巧
- 标签和文章
- tag数据库
- TagManager
- 标签管理页面
- 标签列表页
- 新增标签
- 编辑标签
- 删除标签
- 标签&文章
- 新建标签文章
- 更新标签文章
- 删除标签文章
- 界面
- 【官方】ME.js
- 【官方】jquery-mini-enjoy.js
- bootstrap
- 前端错误页面模板
- 后台界面
- 后台页面模板框架
- 后台左边菜单
- 后台页面控制
- Search表单
- 基础界面
- Panel-Tab
- Panel-Tab基础
- 前端
- IOS禁止页面滚动
- layer技巧
- JS中通过LayUI弹出文本输入层,多个按钮回调
- 表单-Ajax
- token
- 表单验证+Ajax提交
- 前端验证
- 后端验证
- ajax
- checkbox 全选
- ajaxUploader
- ajaxText
- ajax-get
- ajax-input
- 文章
- CRM
- 用户模块
- User
- LoginData
- UserLogin
- UserUpdate
- 商城
- 商品表+SKU
- 购物车
- 订单
- 创建订单-来至于购物车
- 创建订单-来至于立即购买
- 取消订单
- 卡券
- 卡券数据库
- 插件
- 单图片上传插件
- search 搜索插件
- 富文本编辑器
- 表单零部件
- 单文件上传
- Form表单插件
- 隐藏表单
- 标题文字单行
- 文本
- 下拉框select
- CheckBox
- 单图片
- textarea
- 文件上传
- 颜色选择器
- 标签
- 微信
- jssdk
- 自定义回复
- 网页授权流程
- 网页授权
- 用户信息
- 公众号对接配置
- 第三方类库
- VUE库
- php 第三方
- H5库
- 小程序
- 消息队列 Beanstalkd
- API-3
- chrome-开发
- 采集QueryList
- moment.php
- Helper类库
- PageHistory
- FileWeChat
- Text
- Mini-Enjoy
- TODO-LIST
- 视频
- CSS
- 技术文章
- 【shop】订单延时
- IDE&工具
- system
- 路由
- swoole
- 关闭守护进程
- 基于swoole的定时器程序,支持秒级处理
- 测试
- 客户端
- 服务器端
- 入门篇
- 环境搭建及扩展安装
- Swoole的Task使用以及swoole_client
- Timer定时器、心跳检测及Task进阶实例:mysql连接池
- Swoole多端口监听、热重启以及Timer进阶:简单crontab
- Swoole的自定义协议功能的使用
- 命令行模式
- 控制台命令
- 使用Console命令、快捷方式和内建命令
- 理解控制台参数是如何被操作的
- 如何使用提问
- 如何对命令行进行彩色和样式输出
- ★如何从控制器中调用一个命令★
- 控制台输出(参数和选项)
- 冗长级别
- 自定义命令
- RestAPI
- 设计规范
- API
- 商品分类+数据
- [小程序]-新增用户登录
- 外卖平台
- 设计
- 扩展
- SSL
