微信小程序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 相关文章推荐
JQERY limittext 插件0.2版(长内容限制显示)
Aug 27 Javascript
js中设置元素class的三种方法小结
Aug 28 Javascript
Jquery实现视频播放页面的关灯开灯效果
May 27 Javascript
使用jquery插件qrcode生成二维码
Oct 22 Javascript
JS数组去重(4种方法)
Mar 27 Javascript
angular.js+node.js实现下载图片处理详解
Mar 31 Javascript
JavaScript中最常用的10种代码简写技巧总结
Jun 28 Javascript
jQuery实现锚点向下平滑滚动特效示例
Aug 29 jQuery
react写一个select组件的实现代码
Apr 03 Javascript
vue 中url 链接左边的小图标更改问题
Dec 30 Javascript
Vue中父子组件的值传递与方法传递
Sep 28 Javascript
vue-amap根据地址回显地图并mark的操作
Nov 03 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
基于mysql的bbs设计(五)
2006/10/09 PHP
php递归遍历多维数组的方法
2015/04/18 PHP
php为字符串前后添加指定数量字符的方法
2015/05/04 PHP
yii2.0使用Plupload实现带缩放功能的多图上传
2015/12/22 PHP
判断对象是否Window的实现代码
2012/01/10 Javascript
js添加table的行和列 具体实现方法
2013/07/22 Javascript
angularJS提交表单(form)
2015/02/09 Javascript
动态加载js的方法汇总
2015/02/13 Javascript
包含中国城市的javascript对象实例
2015/08/03 Javascript
浅析jQuery Ajax请求参数和返回数据的处理
2016/02/24 Javascript
AngularJS $injector 依赖注入详解
2016/09/14 Javascript
详解如何用babel转换es6的class语法
2018/04/03 Javascript
深入理解vue-class-component源码阅读
2019/02/18 Javascript
深入webpack打包原理及loader和plugin的实现
2020/05/06 Javascript
ant-design表单处理和常用方法及自定义验证操作
2020/10/27 Javascript
[02:07]2017国际邀请赛中国区预选赛直邀战队前瞻
2017/06/23 DOTA
Python3搜索及替换文件中文本的方法
2015/05/22 Python
Python编程中的文件读写及相关的文件对象方法讲解
2016/01/19 Python
pandas Dataframe行列读取的实例
2018/06/08 Python
python中的变量如何开辟内存
2018/06/26 Python
深入浅析python 协程与go协程的区别
2019/05/09 Python
Django 接收Post请求数据,并保存到数据库的实现方法
2019/07/12 Python
python实现指定ip端口扫描方式
2019/12/17 Python
Python学习之time模块的基本使用
2021/01/17 Python
adidas菲律宾官网:adidas PH
2020/02/07 全球购物
即兴演讲稿
2014/01/04 职场文书
制作部班长职位说明书
2014/02/26 职场文书
学习十八大坚定理想信念心得体会
2014/03/11 职场文书
人与自然的观后感
2015/06/18 职场文书
《金钱的魔力》教学反思
2016/02/20 职场文书
关于公司年会的开幕词
2016/03/04 职场文书
2020优秀员工演讲稿(三篇)
2019/10/17 职场文书
MySQL如何构建数据表索引
2021/05/13 MySQL
Java Kafka 消费积压监控的示例代码
2021/07/01 Java/Android
深入理解Pytorch微调torchvision模型
2021/11/11 Python
关于对TypeScript泛型参数的默认值理解
2022/07/15 Javascript