uniapp主体不滚动 子级滚动

### 解决 UniApp 中父容器固定不滚动而子组件内部可滚动的问题

为了实现在 UniApp 应用中让父容器保持静止不动，仅允许其内的特定子组件进行滚动的功能，需考虑多个方面来确保这一效果能在不同平台上一致工作。具体来说：

对于自定义组件内设置 `overflow-y: auto` 的样式，在某些情况下可能不会按预期在真机上触发滚动功能[^1]。这通常是因为触摸事件未能被正确处理或传递给目标元素。

针对此现象的一个常见修复措施涉及调整 CSS 属性以及 JavaScript 逻辑以更好地控制触控交互行为。特别是当涉及到弹窗或其他形式的覆盖层时，如果这些层未适当管理 `touchmove` 事件，则可能导致外部页面意外滑动而不是期望的目标区域能够响应用户的上下拖拽动作[^2]。

另外一种方法是在使用 `<scroll-view>` 组件的情况下通过指定方向参数 (`scroll-x`, `scroll-y`) 来限定滚动的方向，并利用该组件自带的方法去优化性能表现和视觉体验。值得注意的是，在 iOS 设备上，默认状态下可能会显示出不必要的滚动条；因此还需要额外配置属性如 `show-scrollbar="false"` 或者采用其他手段彻底消除它们的影响[^3]。

#### 实现代码示例

下面给出一段简单的 HTML 和 JS 结合的例子展示如何创建一个不可滚动的父亲节点包裹着若干个可以独立滚动的孩子们：

<template>
  <view class="parent">
    <!-- 子组件 -->
    <scroll-view :scroll-y="true" @touchstart.stop="" style="height: 200px;">
      <block v-for="(item, index) in items" :key="index">
        <text>{{ item }}</text><br />
      </block>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      items: Array.from({ length: 50 }, (_, i) => `Item ${i + 1}`)
    };
  }
};
</script>

<style scoped lang="scss">
.parent {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
</style>

在此案例里，“@touchstart.stop”用于阻止冒泡传播至更高级别的 DOM 节点，从而防止整个页面跟随手指移动而发生位移变化。同时，`.parent` 类应用了绝对定位并占据了屏幕上的全部空间，使其本身不具备任何滚动特性。