微信小程序 -解决弹窗滚动穿透问题_微信小程序弹窗<modal>内容滑动-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_41195867/article/details/110540738

本文探讨了微信小程序中，使用fixed设置弹窗蒙层时遇到的滚动穿透问题。当弹窗和内容区域都有滚动条时，滑动蒙层会导致底层页面滚动。为解决这一问题，建议将主页面包裹在scroll-view组件中，并在弹窗出现时设置scroll-y为false。通过调整代码，实现了弹窗内部可正常滚动，而滑动蒙层时不影响底层页面的滚动效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信小程序用fixed设置弹窗蒙层，当弹窗和内容都存在滚动时，滑动弹窗蒙层，下面的页面会有滚动。

解决方式：主页面用scroll-view标签，弹窗时 scroll-y设置为false

希望的效果是弹窗内能正常滚动，滑动弹窗蒙层，下面页面不会产生滚动。

在这里插入图片描述

代码块：https://developers.weixin.qq.com/s/SmCJ1smL73mG
~~https://developers.weixin.qq.com/s/dRtNMlm97mmt~~

modal.wxml



<scroll-view class="main-view"  scroll-y="{
   {!modal}}">
	<view>
	
	    <view class="red" bindtap="handleModal">展示弹窗</view> 
	    <view>1、每日只能每日只能每日只能每日只能。</view> 
	    <view>2、一天一天一天一天一天一天一天一天。</view>
	    <view>3、当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月3、当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月3、当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月3、当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月3、当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月.....................................</view>
	    <view>4、当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月3、当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月3、当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月3、当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月3、当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月.....................................</view>
	    <view>4、当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月3、当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月3、当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月3、当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月3、当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月当月.................................