微信小程序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 相关文章推荐
PNG背景在不同浏览器下的应用
Jun 22 Javascript
ExtJs事件机制基本代码模型和流程解析
Oct 24 Javascript
jQuery寻找n以内完全数的方法
Jun 24 Javascript
ReactNative-JS 调用原生方法实例代码
Oct 08 Javascript
详解angular 中的自定义指令之详解API
Jun 20 Javascript
原生js封装添加class,删除class的实例
Nov 06 Javascript
从vue基础开始创建一个简单的增删改查的实例代码(推荐)
Feb 11 Javascript
详解VUE项目中安装和使用vant组件
Apr 28 Javascript
自定义javascript验证框架示例【附源码下载】
May 31 Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
Sep 25 Javascript
ssm+vue前后端分离框架整合实现(附源码)
Jul 08 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
Oct 30 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
javascript 小型动画组件与实现代码
2010/06/02 PHP
wordpress自定义url参数实现路由功能的代码示例
2013/11/28 PHP
PHP实现的敏感词过滤方法示例
2019/03/06 PHP
php intval函数用法总结
2019/04/14 PHP
jQuery 研究心得 取得属性的值
2007/11/30 Javascript
Extjs学习笔记之二 初识Extjs之Form
2010/01/07 Javascript
js 创建快捷方式的代码(fso)
2010/11/19 Javascript
jquery一般方法介绍 入门参考
2011/06/21 Javascript
JavaScript 原型继承之构造函数继承
2011/08/26 Javascript
基于jquery的点击链接插入链接内容的代码
2012/07/31 Javascript
js调用后台servlet方法实例
2013/06/09 Javascript
js判断浏览器是否支持html5
2014/08/17 Javascript
jquery自定义表格样式
2015/11/23 Javascript
jQuery dataTables与jQuery UI 对话框dialog的使用教程
2016/09/02 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
2017/03/08 Javascript
Vue 仿QQ左滑删除组件功能
2018/03/12 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
2019/09/21 Javascript
在vue中使用vuex,修改state的值示例
2019/11/08 Javascript
[01:17]Ti4 循环赛第一日回顾
2014/07/11 DOTA
[01:06:25]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
使用Python的Tornado框架实现一个一对一聊天的程序
2015/04/25 Python
Python与Java间Socket通信实例代码
2017/03/06 Python
一篇文章快速了解Python的GIL
2018/01/12 Python
解决pycharm 工具栏Tool中找不到Run manager.py Task的问题
2019/07/01 Python
Python 使用list和tuple+条件判断详解
2019/07/30 Python
python2 对excel表格操作完整示例
2020/02/23 Python
Django基于Models定制Admin后台实现过程解析
2020/11/11 Python
pandas按照列的值排序(某一列或者多列)
2020/12/13 Python
Python爬虫之Selenium库的使用方法
2021/01/03 Python
瑞典灯具和照明网上商店:Lamp24.se
2018/03/17 全球购物
伊琍体标语
2014/06/25 职场文书
团日活动总结怎么写
2014/06/25 职场文书
2014年世界艾滋病日演讲稿
2014/11/28 职场文书
数据库之SQL技巧整理案例
2021/07/07 SQL Server
Jpa Specification如何实现and和or同时使用查询
2021/11/23 Java/Android
Tomcat配置访问日志和线程数
2022/05/06 Servers