微信小程序scroll-view实现滚动穿透和阻止滚动的方法


Posted in Javascript onAugust 20, 2018

scroll-view滚动穿透,阻止滚动

页面弹窗阻止滚动是一种常见的问题,这里简单介绍小程序scroll-view的一种解决方式

常用阻止滚动方式

在不使用scroll-view的弹窗中, 为position为absolute或fixed的元素设置catchtouchmove空事件就可以阻止弹窗下的页面因事件穿透滚动

<view catchtouchmove="doNothing"></view>

也可直接写catchtouchmove,相当于绑定了事件名为true的事件

问题场景

在小程序中,在absolute或fixed的类弹窗布局中。要显示列表、长文本段落等可滚动元素,必须使用scroll-view组件,无法阻止页面本身的滚动

解决办法

既然无法简单的阻止事件穿透,就在页面可滚动的元素本身想想办法:

页面滚动元素

小程序中的简单布局,在页面内容超出一屏时,滚动的元素是page

如何让页面不滚动

将page的高度设为100%,页面最外层放一个view,打开弹窗时通过一个class增加样式,设页面高度100%,overflow: hidden来停止滚动

打开弹窗时设isStopBodyScroll为true,关闭时设为false

<view class="{{isStopBodyScroll ? 'scroll-lock' : ''}}">
 <!-- 页面内容 -->
</view>
.scroll-lock {
 height: 100%;
 overflow-y: hidden;
}

存在的问题

这样设置页面会回到顶部,期待有更好的解决方式或官方对这个问题提供支持

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
实现51Map地图接口(示例代码)
Nov 22 Javascript
JQuery中serialize()用法实例分析
Feb 06 Javascript
js跨域请求的5中解决方式
Jul 02 Javascript
深入解析JavaScript中的立即执行函数
May 21 Javascript
AngularJS 中文API参考手册
Jul 28 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
May 25 Javascript
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
Vue 与 Vuex 的第一次接触遇到的坑
Aug 16 Javascript
浅谈redux, koa, express 中间件实现对比解析
May 23 Javascript
基于webpack4+vue-cli3项目实现换肤功能
Jul 17 Javascript
基于JavaScript 实现拖放功能
Sep 12 Javascript
js前端面试常见浏览器缓存强缓存及协商缓存实例
Jun 21 Javascript
Angular6 写一个简单的Select组件示例
Aug 20 #Javascript
Layer弹出层动态获取数据的方法
Aug 20 #Javascript
layui 给数据表格加序号的方法
Aug 20 #Javascript
解决LayUI表单获取不到data的问题
Aug 20 #Javascript
Layui数据表格之获取表格中所有的数据方法
Aug 20 #Javascript
解决layui上传文件提示上传异常,实际文件已经上传成功的问题
Aug 19 #Javascript
解决layui中table异步数据请求不支持自定义返回数据格式的问题
Aug 19 #Javascript
You might like
使用php+xslt在windows平台上
2006/10/09 PHP
一个简单的PHP投票程序源码
2007/03/11 PHP
生成静态页面的php函数,php爱好者站推荐
2007/03/19 PHP
精美漂亮的php分页类代码
2013/04/02 PHP
php生成0~1随机小数的方法(必看)
2017/04/05 PHP
基于php编程规范(详解)
2017/08/17 PHP
PHP实现的ID混淆算法类与用法示例
2018/08/10 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
Javascript 函数对象的多重身份
2009/06/28 Javascript
JScript 脚本实现文件下载 一般用于下载木马
2009/10/29 Javascript
基于jQuery制作迷你背词汇工具
2010/07/27 Javascript
jQuery Ajax使用 全解析
2010/12/15 Javascript
JS日期和时间选择控件升级版(自写)
2013/08/02 Javascript
JavaScript var声明变量背后的原理示例解析
2013/10/12 Javascript
JavaScript中的索引数组、关联数组和静态数组、动态数组讲解
2014/11/08 Javascript
jquery滚动特效集锦
2015/06/03 Javascript
JQuery实现简单的服务器轮询效果实例
2016/03/31 Javascript
Vue开发中整合axios的文件整理
2017/04/29 Javascript
关于vue.extend和vue.component的区别浅析
2017/08/16 Javascript
微信小程序实现tab左右切换效果
2020/11/15 Javascript
微信小程序云开发之使用云存储
2019/05/17 Javascript
jQuery位置选择器用法实例分析
2019/06/28 jQuery
一步一步实现Vue的响应式(对象观测)
2019/09/02 Javascript
Vue中computed和watch有哪些区别
2020/12/19 Vue.js
Python中的字符串替换操作示例
2016/06/27 Python
python实现实时监控文件的方法
2016/08/26 Python
点球小游戏python脚本
2018/05/22 Python
将python文件打包成EXE应用程序的方法
2019/05/22 Python
PyQt4 treewidget 选择改变颜色,并设置可编辑的方法
2019/06/17 Python
python模式 工厂模式原理及实例详解
2020/02/11 Python
python图形开发GUI库pyqt5的详细使用方法及各控件的属性与方法
2020/02/14 Python
10分钟理解CSS3 FlexBox弹性布局
2018/12/20 HTML / CSS
应用电子专业学生的自我评价
2013/10/16 职场文书
竞选卫生委员演讲稿
2014/04/28 职场文书
本科生求职信
2014/06/17 职场文书
党员学习党的群众路线思想汇报(5篇)
2014/09/10 职场文书