小程序
小游戏
企业微信
微信支付
扫描小程序码分享
小程序的自定义的，遮罩层会出现滚动穿透的问题，即遮罩层下面的页面依旧可以滚动，这个问题有解决办法吗？
13 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
是哪个组件？
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
如果弹出层没有滚动事件，就直接在蒙板上加catchtouchmove="move" move:function(){};
如果弹出层有滚动事件，那么在弹出层出现的时候给底部的containerView加上一个class 消失的时候移除。
<view class="{{showSearchView?'tripList_root':''}}">
.tripList_root{
top:0px;
left: 0px;
width: 100%;
height: 100%;
overflow: hidden;
position: fixed;
z-index: 0;
}
3. 亲测有效。
也可以直接用catchtouchmove="{{true}}"
position
:
relative
;
z-index
0
建议用这两行，fixed会导致布局滚动到顶部
使用page-meta组件设置 overflow: hidden即可解决
可以这样来解决，
参照：https://blog.csdn.net/WEIGUO19951107/article/details/106970582
// 重点A：阻止事件冒泡 handleTouchMove = (e) => { e.stopPropagation() } render() { return ( <View className='rootClass' onTouchMove={this.handleTouchMove}> <!-- 遮罩层 --> <View onClick={this.close} className='at-float-layout__overlay' /> <View className='at-float-layout__container layout'> <View className='layout-body'> <!-- 重点B: ScrollView（开启scrollY）--> <ScrollView scrollY scrollX={false} className='layout-body__content' > {this.props.children} </ScrollView> </View> </View> </View> ) }
把catchtouchmove="stopTouch" 放在 包裹遮罩与对话框的 view中，在js添加stopTouch(){} 方法。在开发工具中测试无效。在真机中测试可行
现在有方案解决现在
detail.json 文件中 添加禁止 弹性
当弹层时候 把scroll-view的竖向滚动禁用，不让滚动，关闭弹层后再打开
这样弹层后 背景是完全不动的也没有他弹性，就不会出现背景层跟着动了
上面的方法有缺点：
当页面注册有onPullDownRefresh事件时会触发该事件；
当页面滚动一定距离时，显示遮罩时页面会回到顶部；
我也遇到同样的问题，但是我看美团的小程序做出来了这个效果，不知道他们怎么做的
一楼说的思路对。
如果弹出层也有滚动，完美的方案是先把背景层设置成fixed高度100%，然后遮罩出现修改背景层的overflow：hidden，遮罩消失修改overflow-y：scroll，大致就是这个思路，亲测，就算修改后也不会导致背景层归顶，完美。
<template name="timeSelect">
<view wx:if="{{id}}" class="stop_bg_scroll" catchtouchmove="preventTouchMove">
<form bindsubmit="bindsubmit" id='{{id}}'>
<!-- 半透明遮挡层 -->
<view class="dialog-mask" bindtap="bindtap" id="mask" style="display:block;"></view>
<view class='time-time'>
<!-- 标题 -->
<view indicator-style="height: 50px;" class="time-title">{{title}}{{yyyy}}-{{MM}}-{{dd}} {{HH}}:{{mm}}:{{ss}}
</view>
<!-- 时间滚动条 -->
<picker-view id="{{id}}" indicator-style="height: 50px;" class='time-content' value="{{value}}" bindchange="bindchange"name="index">
<picker-view-column>
<view wx:for="{{yyyys}}" style="line-height: 50px">{{item}}年</view>
</picker-view-column>
<view wx:for="{{MMs}}" style="line-height: 50px">{{item}}月</view>
<view wx:for="{{dds}}" style="line-height: 50px">{{item}}日</view>
<view class="time-footer">
<button class="time-cancel" formType='submit' id="cancel" data-status="cancel">取消</button>
<button class="time-confirm" formType='submit' id="confirm" data-status="confirm">确定</button>
</form>
</template>
wxss:
.stop_bg_scroll{
top: 0px;
希望有用
那么下拉刷新还有效么？
正在加载...
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
是哪个组件？
如果弹出层没有滚动事件，就直接在蒙板上加catchtouchmove="move" move:function(){};
如果弹出层有滚动事件，那么在弹出层出现的时候给底部的containerView加上一个class 消失的时候移除。
<view class="{{showSearchView?'tripList_root':''}}">
.tripList_root{
top:0px;
left: 0px;
width: 100%;
height: 100%;
overflow: hidden;
position: fixed;
z-index: 0;
}
3. 亲测有效。
也可以直接用catchtouchmove="{{true}}"
position:relative;z-index:0;建议用这两行，fixed会导致布局滚动到顶部
使用page-meta组件设置 overflow: hidden即可解决
可以这样来解决，
参照：https://blog.csdn.net/WEIGUO19951107/article/details/106970582
// 重点A：阻止事件冒泡 handleTouchMove = (e) => { e.stopPropagation() } render() { return ( <View className='rootClass' onTouchMove={this.handleTouchMove}> <!-- 遮罩层 --> <View onClick={this.close} className='at-float-layout__overlay' /> <View className='at-float-layout__container layout'> <View className='layout-body'> <!-- 重点B: ScrollView（开启scrollY）--> <ScrollView scrollY scrollX={false} className='layout-body__content' > {this.props.children} </ScrollView> </View> </View> </View> ) }把catchtouchmove="stopTouch" 放在 包裹遮罩与对话框的 view中，在js添加stopTouch(){} 方法。在开发工具中测试无效。在真机中测试可行
现在有方案解决现在
detail.json 文件中 添加禁止 弹性
当弹层时候 把scroll-view的竖向滚动禁用，不让滚动，关闭弹层后再打开
这样弹层后 背景是完全不动的也没有他弹性，就不会出现背景层跟着动了
上面的方法有缺点：
当页面注册有onPullDownRefresh事件时会触发该事件；
当页面滚动一定距离时，显示遮罩时页面会回到顶部；
我也遇到同样的问题，但是我看美团的小程序做出来了这个效果，不知道他们怎么做的
一楼说的思路对。
如果弹出层也有滚动，完美的方案是先把背景层设置成fixed高度100%，然后遮罩出现修改背景层的overflow：hidden，遮罩消失修改overflow-y：scroll，大致就是这个思路，亲测，就算修改后也不会导致背景层归顶，完美。
<template name="timeSelect">
<view wx:if="{{id}}" class="stop_bg_scroll" catchtouchmove="preventTouchMove">
<form bindsubmit="bindsubmit" id='{{id}}'>
<!-- 半透明遮挡层 -->
<view class="dialog-mask" bindtap="bindtap" id="mask" style="display:block;"></view>
<view class='time-time'>
<!-- 标题 -->
<view indicator-style="height: 50px;" class="time-title">{{title}}{{yyyy}}-{{MM}}-{{dd}} {{HH}}:{{mm}}:{{ss}}
</view>
<!-- 时间滚动条 -->
<picker-view id="{{id}}" indicator-style="height: 50px;" class='time-content' value="{{value}}" bindchange="bindchange"name="index">
<picker-view-column>
<view wx:for="{{yyyys}}" style="line-height: 50px">{{item}}年</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{MMs}}" style="line-height: 50px">{{item}}月</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{dds}}" style="line-height: 50px">{{item}}日</view>
</picker-view-column>
</picker-view><view class="time-footer">
<button class="time-cancel" formType='submit' id="cancel" data-status="cancel">取消</button>
<button class="time-confirm" formType='submit' id="confirm" data-status="confirm">确定</button>
</view>
</view>
</form>
</view>
</template>
wxss:
.stop_bg_scroll{
top: 0px;
left: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
希望有用
那么下拉刷新还有效么？