微信小程序 显示弹框引发背景下页面滚动问题(滚动穿透问题)移动端同理

字节拓月人
• 阅读 1447

微信小程序 弹框引发背景下~~~~页面滚动问题(滚动穿透问题)移动端同理
之前遇到这个滚动传统问题一直没解决,最近终于抽出时间研究了一下,解决一个心头大患,啊啊啊~开心
下载demo
https://github.com/zhangrui-1...


微信小程序 显示弹框引发背景下页面滚动问题(滚动穿透问题)移动端同理
表现现象:
在弹出遮罩背景和弹出内容时,滑动弹出内容,背景下面的内容也跟着滑动

解决思路:
将底页面设置position:fixed,且要设置当前弹~~~~框时所处位置的top值

H5页面获取方式:
scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

小程序获取方式:

wx.createSelectorQuery().select('#normal').boundingClientRect((rect) => {
      console.log(rect)
      scrollTop = rect.top
      console.log()
      this.setData({
        ispopCoupon:true,
        scrollTop:scrollTop,
        noScroll:position:fixed;top:${scrollTop}~~~~
      })
    }).exec()`

当然在滚动事件时也需要在设置一下
H5
加一个 window.addEventListener 监听滑动
小程序
onPageScroll事件

点赞
收藏
评论区
推荐文章
前端 滚动到目标元素位置 VUE 版本
1、前言想起之前一次在写一个小程序商城时候,详情页的类似锚点的跳转花了我不少时间,因为刚写,对小程序滚动,滚动距离那套不熟悉加之本身对什么滚动高度,元素距离顶部距离不是很了解,花了挺长时间的,这几天有空,就研究了下。2、先看效果在这里插入图片描述(https://imghelloworld.osscnbeijing.aliyuncs.c
九路 九路
3年前
RecycleView滚动定位不准确问题研究
开发当中经常会遇到的产品需求,recycleview自动滚动到某一个位置。具体场景可能是如下:页面初始化之后自动自动跳转到某一个位置页面滚动之后要回到某一个位置为了展示完全需要recycleview做微小的
golang使用chromedp生成滚动更新页面的PDF
缘起目前有一个Python项目,作用是打开一个报表页面,截图后生成PDF,作为邮件附件发送到指定邮箱。当前这个Python项目性能较差,目前项目组没有人会Python,于是决定使用golang重写一下模拟滚动更新这个页面是滚动更新的,滚动到某个地方才会加载
梦
5年前
微信小程序new Date()转换时间异常问题
微信小程序苹果手机页面上显示时间异常,安卓机正常问题image(https://imghelloworld.osscnbeijing.aliyuncs.com/imgs/b691e1230e2f15efbd81fe11ef734d4f.png)错误代码vardate'2021030617:00:00'vardateT
梦
5年前
微信小程序以及所有js小数计算位数问题
微信小程序计算小数出现小数点后重复精度问题{{0.010.2}}解决办法有两种:方法一、使用toFixed(2)data:{
Stella981 Stella981
4年前
App唤起微信小程序和回调
在同一开放平台账号下的移动应用及小程序无需关联即可完成跳转,非同一开放平台账号下的小程序需与移动应用(APP)成功关联后才支持跳转。可在“管理中心移动应用应用详情关联小程序信息”,为通过审核的移动应用发起关联小程序操作。唤起App打开下程序他有两种方式:1,通过App分享小程序卡片到微信,然后在微信上点击小程序卡片打开小程序,
Wesley13 Wesley13
4年前
5G消息与微信小程序互联互通?北京国都互联这么做……
最近微信小程序上线了一个超级流量的新入口URLScheme,据微信官网介绍,scheme码适用于短信、邮件、外部网页等拉起小程序的业务场景。通过小程序页面的URLScheme,可以在短信、邮件或微信外部的网页中打开微信小程序。意义在于将微信流量生态延伸到微信以外渠道,进一步完善了小程序和外部渠道互通的营销场景。北京国都互联第一时
Wesley13 Wesley13
4年前
.NET之微信小程序获取用户UnionID
前言:  在实际项目开发中我们经常会遇到账号统一的问题,如何在不同端或者是不同的登录方式下保证同一个会员或者用户账号唯一(便于用户信息的管理)。这段时间就有一个这样的需求,之前有个客户做了一个微信小程序商城(店主端的),然后现在又要做一个会员购物端的小程序商场。首先之前用户登录凭证都是使用微信openid来做的唯一标识,而现在客户需求是要做到用户
Stella981 Stella981
4年前
JFinal各种场景(PC、APP、微信小程序等)分页方案
JFinal专题之分页解决方案【课程介绍】 详细介绍数据库分页原理,自己动手封装前端分页组件,然后介绍第三方的js分页组件,集成laypage插件,了解各种分页模式,不管是跳转分页,数据库分页、前端分页、滚动加载分页、ajax数据分页、APP移动端分页、微信小程序分页等【课程目标】 掌握数据库分页原理,熟练使用JFinal操作数据库分页查
Wesley13 Wesley13
4年前
MFC 控件编程之水平滚动条跟垂直滚动条
        MFC控件编程之水平滚动条跟垂直滚动条一点水平滚动条的操作  首先在操作滚动条的时候.我们要知道滚动条的一些属性.比如我们要设置最大值最小值.以及每次递增的值是多少.都要设置.所有就有一个结构.专门存储了滚动条信息.而我们在对话框一启动就要