解决uniapp的H5项目uni-popup页面滚动穿透bug

想个什么名好呢2025-11-26 15:50

项目中，某个页面使用了uni-popup组件时，内部有个内容做了超出滚动处理，但是滚动到底部或者顶部时会带动外出的页面内容滚动，搜了很多文章都是推荐的uni-popup上加@touchmove.stop.prevent="()=>{}"但是这样uni-popup组件内部也不能滚动了，后续有查找到在uni-popup组件内部使用scroll-view组件，设置

js 复制代码

<scroll-view style="overflow-y: scroll;" scroll-y>
  <!-- 滚动内容 -->
</scroll-view>

这种又存在滚动到底部时，有时也会经常触发带动外部页面滚动，去问了deepseek、通义千问等都没有很好的解决办法，最后突发奇想，既然是页面滚动，那么在页面顶层直接设置固定高度height: 100vh;(注意根据项目页面高度实际配置); overflow: auto; 这样页面滚动就变成了元素内部滚动, 再在uni-popup组件内部的超出内容的元素也设置固定高度和超出显示滚动条处理，我是给元素设置的flex: 1;(自适应高度); overflow: auto; 这样就完美解决滚动穿透问题

js 复制代码

<!-- 示例 -->
<uni-popup type="bottom">
  <view style="display: flex; flex-direction: column; height: 80vh;" class="popup-box">
    <view class="title-box">标题</view>
    <view style="flex: 1; overflow: auto;" class="content-box">内容</view>
    <view class="footer-box">底部内容</view>
  </view>
</uni-popup>

一键获取完整项目代码 html 而且也不用设置@touchmove.stop.prevent="()=>{}"或使用scroll-view组件处理等。