微信小程序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 相关文章推荐
Javascript &amp; DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
Jun 02 Javascript
点击下载链接 弹出页面实现代码
Oct 01 Javascript
JavaScript实现网页上的浮动广告的简单方法
Jun 14 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
Feb 28 Javascript
手机端页面rem宽度自适应脚本
May 20 Javascript
AngularJS入门教程之多视图切换用法示例
Nov 02 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
Feb 22 Javascript
解决vue+webpack打包路径的问题
Mar 06 Javascript
使用Vue构建可重用的分页组件
Mar 26 Javascript
详解JavaScript的内存空间、赋值和深浅拷贝
Apr 17 Javascript
js实现上传图片到服务器
Apr 11 Javascript
原生JS实现飞机大战小游戏
Jun 09 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时间戳与日期之间转换的实例介绍
2013/04/19 PHP
php_screw 1.5:php加密: 安装与使用详解
2013/06/20 PHP
PHP比较运算符的详细介绍
2015/09/29 PHP
PHP正则+Snoopy抓取框架实现的抓取淘宝店信誉功能实例
2017/05/17 PHP
php实现文章评论系统
2019/02/18 PHP
JQuery 网站换肤功能实现代码
2009/11/02 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
2015/10/21 Javascript
探讨JavaScript语句的执行过程
2016/01/28 Javascript
再次谈论Javascript中的this
2016/06/23 Javascript
Ajax使用原生态JS验证用户名是否存在
2020/05/26 Javascript
JS常用函数和常用技巧小结
2016/10/15 Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
2017/01/11 Javascript
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
2017/05/03 Javascript
javascript编程开发中取色器及封装$函数用法示例
2017/08/09 Javascript
JS小球抛物线轨迹运动的两种实现方法详解
2017/12/20 Javascript
创建Vue项目以及引入Iview的方法示例
2018/12/03 Javascript
基于vue.js实现购物车
2020/01/15 Javascript
vue+Element中table表格实现可编辑(select下拉框)
2020/05/21 Javascript
让你30分钟快速掌握vue3教程
2020/10/26 Javascript
Python 序列化 pickle/cPickle模块使用介绍
2014/11/30 Python
Python中的各种装饰器详解
2015/04/11 Python
flask框架实现连接sqlite3数据库的方法分析
2018/07/16 Python
python3对拉勾数据进行可视化分析的方法详解
2019/04/03 Python
Python实现字符串中某个字母的替代功能
2019/10/21 Python
css3实现背景图片拉伸效果像桌面壁纸一样
2013/08/19 HTML / CSS
英国领先的葡萄酒专家:Majestic Wine
2017/05/30 全球购物
加拿大领先的牛仔零售商:Bluenotes
2018/01/22 全球购物
会计专业自荐信范文
2013/12/02 职场文书
大专会计自我鉴定
2014/02/06 职场文书
英文自荐信常用句子
2014/03/26 职场文书
学雷锋志愿者活动方案
2014/08/21 职场文书
社会治安综合治理责任书
2015/01/29 职场文书
正规欠条模板
2015/07/03 职场文书
奖学金申请书(范文)
2019/08/14 职场文书
MySQL 使用SQL语句修改表名的实现
2021/04/07 MySQL
Mysql服务添加 iptables防火墙策略的方案
2021/04/29 MySQL