解决uniapp的H5项目uni-popup页面滚动穿透bug项目中，某个页面使用了uni-popup组件时，内部有个内

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

<!-- 示例 -->
<uni-popup type="bottom">
  <view class="popup-box">
    <view class="title-box">标题</view>
    <scroll-view style="overflow-y: scroll;" scroll-y class="content-box">
      <!-- 滚动内容 -->
    </scroll-view>
    <view class="footer-box">底部内容</view>
  </view>
</uni-popup>

这种又存在滚动到底部时，有时也会经常触发带动外部页面滚动，去问了deepseek、通义千问等都没有很好的解决办法，最后是通过scroll-view滚动+css滚动实现

在页面主体内容用scroll-view包裹(解决来回切换页面时，内容回到顶部bug)，给其设置固定高度height: 100vh;(注意根据项目页面高度实际配置); overflow: auto;
再在uni-popup组件内部的超出内容的元素也设置固定高度和超出显示滚动条处理，我是给元素设置的flex: 1;(自适应高度); overflow: auto; 这样就完美解决滚动穿透问题

<!-- 示例 -->
<template>
  <view class="main-box">
    <!-- 主体内容 -->
    <scroll-view class="scroll-view-box" scroll-y scroll-with-animation>
      <!-- 内容 -->
    </scroll-view>
    <!-- 弹出层 -->
    <uni-popup type="bottom">
      <view class="popup-box">
        <view class="title-box">标题</view>
        <view class="content-box">内容</view>
        <view class="footer-box">底部内容</view>
      </view>
    </uni-popup>
  </view>
</template>

<style lang="scss" scoped>
.main-box {
  // 主体内容
  .scroll-view-box {
    height: 100vh; /* 视口高度 */
    overflow-y: auto; /* 关键属性 */
    -webkit-overflow-scrolling: touch; /* iOS滑动更流畅 */
  }
  // 弹出层
  .popup-box {
    display: flex;
    flex-direction: column;
    height: 80vh; /* 弹出层高度 */
    .content-box {
      flex: 1;
      overflow: auto;
      /**
       * 阻止滚动穿透 - 如果测试滚动时未影响外层滚动时, 可不加
       * 我这里加是加个"保险" 
       */
      overscroll-behavior-y: contain; /* 阻止滚动穿透 */
      -webkit-overscroll-behavior-y: contain; /* 阻止滚动穿透 */
    }
  }
}
</style>

而且也不用设置@touchmove.stop.prevent="()=>{}"或使用uni-popup组件内部scroll-view组件处理等。

吐槽：这么几年针对这种多内容的都是做的单独页面，现在想改个写法，做到跟主页面强关联，也方便交互，结果各种bug，都2025了，uniapp还...(可惜没得选)