解决微信小程序中的滚动穿透问题


Posted in Javascript onSeptember 16, 2019

Mask-Scroll

> 原码地址 *

蒙层防穿透问题

> 蒙层穿透就是,当你用fixed 布局让蒙层显示的时候, 手指滑动屏幕会出现底部内容也滑动的现象. 如图:

解决微信小程序中的滚动穿透问题

当蒙层出现的时候,你滚动屏幕,底部内容也一起跟着滚动。 这就是蒙层穿透, 也可以叫 '滚动穿透'. 当然出现这种情况, 用户体验当然是不好的了。 所以作为一个有点追求的工程师当然是不允许这种情况的发生了(手动狗头...)

解决微信小程序中的滚动穿透问题

## 解决方案

这种要分情况,

  • 当蒙层没有滚动条的时候。
  • 当蒙层出现滚动条的时候

1. 当弹窗没有滚动条的时候。

直接监听 catch:touchmove 方法, 然后直接返回就可以了。

代码可以去看fixed 目录下的文件

主要代码:

*// wxml*
 <view 
​ class="fixed-mask"
​ bind:tap="hideMsak"
​ wx:if="{{isShowMask}}"
​ catch:touchmove="stopMove">
​ <view class="mask-container" >
​  <view class="mask__item">
​  I am {{dogName}}
​  </view>
​ </view>
 </view>
 *// css*
 .fixed-mask {
 position: fixed;
 left: 0;
 top: 0;
 height: 100vh;
 width: 100vw;
 background: #333;
 opacity: 0.8;
 z-index: 2;
}
.mask-container {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}
.mask__item {
 margin: 0 auto;
 background-color: #ff0015;
 text-align: center;
 width: 500rpx;
 height: 500rpx;
 line-height: 500rpx;
 margin-bottom: 20rpx;
}
*// js*
 stopMove () {
​ return;
 }

效果如下:

解决微信小程序中的滚动穿透问题

上面是当弹窗没有滚动条的情况, 当弹窗出现滚动条的时候。

哦豁, 完蛋, 弹窗不能滚动了。

2. 当弹窗有滚动条的时候

方法一:

动态给底部滚动的元素 添加固定定位。也就是当出现弹窗的时候添加一个 class 样式类

效果如图:

解决微信小程序中的滚动穿透问题

代码在scroll1 文件夹。

*// css* 

.bottom-fixed {

 position: fixed;

 left: 0;

 top: 0;

 overflow: hidden;

}

*// wxml*

 <view class="dog-container {{isShowMask ? 'bottom-fixed' : ''}}"></view>

大家可以看到 因为底部元素给固定到页面顶部了, 而不是你点击弹窗时出现的位置。目前自己还没有找到解决方法。 如果大佬有会的, 不吝赐教。。

*方法二:*

> scroll-view 设置高度 以及纵向滚动方向。

不过scroll-view 会有一些bug

详情查看

代码在scrooll 文件夹

效果如下图:

解决微信小程序中的滚动穿透问题

总结

以上所述是小编给大家介绍的解决微信小程序中的滚动穿透问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jQuery学习笔记[1] jQuery中的DOM操作
Dec 03 Javascript
cnblogs 代码高亮显示后的代码复制问题解决实现代码
Dec 14 Javascript
javascript表单验证和Window详解
Dec 11 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
Feb 26 Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
Jan 26 Javascript
浅谈javascript中new操作符的原理
Jun 07 Javascript
浅谈jQuery添加的HTML,JS失效的问题
Oct 05 Javascript
JavaScript实现跟随滚动缓冲运动广告框
Jul 15 Javascript
Javascript防止图片拉伸的自适应处理方法
Dec 26 Javascript
jQuery创建折叠式菜单
Jun 15 jQuery
详解小程序BackgroundAudioManager踩坑之旅
Dec 08 Javascript
JavaScript 防盗链的原理以及破解方法
Dec 29 Javascript
微信小程序左滑删除实现代码实例
Sep 16 #Javascript
微信小程序左右滚动公告栏效果代码实例
Sep 16 #Javascript
layui 实现表单和文件上传一起传到后台的例子
Sep 16 #Javascript
Vue 自定义指令实现一键 Copy功能
Sep 16 #Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
Sep 16 #Javascript
layui使用templet格式化表格数据的方法
Sep 16 #Javascript
layui监听单元格编辑前后交互的例子
Sep 16 #Javascript
You might like
网络资源
2006/10/09 PHP
php中取得URL的根域名的代码
2011/03/23 PHP
在Win7 中为php扩展配置Xcache
2014/10/08 PHP
Laravel实现用户注册和登录
2015/01/23 PHP
php 使用curl模拟ip和来源进行访问的实现方法
2017/05/02 PHP
php进程daemon化的正确实现方法
2018/09/06 PHP
几款极品的javascript压缩混淆工具
2007/05/16 Javascript
javascript检查日期格式的函数[比较全]
2008/10/17 Javascript
js里怎么取select标签里的值并修改
2012/12/10 Javascript
JavaScript实现自己的DOM选择器原理及代码
2013/03/04 Javascript
js实现图片轮换效果代码
2013/04/16 Javascript
jQuery设置与获取HTML,文本和值的简单实例
2014/02/26 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
2015/03/04 Javascript
果断收藏9个Javascript代码高亮脚本
2016/01/06 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
2016/09/15 Javascript
简单实现jQuery多选框功能
2017/01/09 Javascript
jQuery读取本地的json文件(实例讲解)
2017/10/31 jQuery
vue 的keep-alive缓存功能的实现
2018/03/22 Javascript
js实现蒙版效果
2020/01/11 Javascript
python实现的用于搜索文件并进行内容替换的类实例
2015/06/28 Python
python列表生成式与列表生成器的使用
2018/02/23 Python
Python实现将数据框数据写入mongodb及mysql数据库的方法
2018/04/02 Python
对python append 与浅拷贝的实例讲解
2018/05/04 Python
一行代码让 Python 的运行速度提高100倍
2018/10/08 Python
python3实现逐字输出的方法
2019/01/23 Python
python爬取内容存入Excel实例
2019/02/20 Python
python Tkinter版学生管理系统
2019/02/20 Python
Python3.6实现带有简单界面的有道翻译小程序
2019/04/16 Python
Pyqt5 实现跳转界面并关闭当前界面的方法
2019/06/19 Python
python3 webp转gif格式的实现示例
2019/12/10 Python
Python Print实现在输出中插入变量的例子
2019/12/25 Python
Python对称的二叉树多种思路实现方法
2020/02/28 Python
美国专业级皮肤病和spa品质护肤品的高级零售网站:SkinCareRx
2017/02/06 全球购物
药物学专业学生的自我评价
2013/10/27 职场文书
挂职思想汇报
2013/12/31 职场文书
CentOS7和8下安装Maven3.8.4
2022/04/07 Servers