iOS 18 SwiftUI水平ScrollView如何禁用垂直滚动、拖拽与刷新？

问题说明 #

用以下代码实现的水平ScrollView，在iOS 18中出现可垂直拖拽、弹出刷新指示器的问题，iOS 17完全正常：

ScrollView(.horizontal, showsIndicators: false) {
    HStack(spacing: 0) {
        ForEach(someCollection) { collection in
            CollectionButton(collectionType: collection)
        }
   }
}
.frame(height: 56)

已测试无效的尝试：

• 切换为垂直滚动方向时功能正常，但不符合业务需求
• 给内部HStack设置固定高度，问题未解决

有效解决方案 #

1. 禁用垂直方向滚动弹跳 #

iOS 18新增的scrollBounceBehavior修饰符可以精准控制滚动轴的弹跳行为，直接禁用垂直方向的弹跳就能阻止刷新指示器出现：

ScrollView(.horizontal, showsIndicators: false) {
    HStack(spacing: 0) {
        ForEach(someCollection) { collection in
            CollectionButton(collectionType: collection)
        }
   }
}
.frame(height: 56)
.scrollBounceBehavior(.disabled, axes: .vertical)

2. 限定内容交互区域 #

通过contentShape把可触发滚动的区域限制为ScrollView的容器范围，避免垂直方向的拖拽被误识别：

ScrollView(.horizontal, showsIndicators: false) {
    HStack(spacing: 0) {
        ForEach(someCollection) { collection in
            CollectionButton(collectionType: collection)
        }
   }
   .contentShape(Rectangle())
}
.frame(height: 56)

3. 裁剪内容超出区域 #

给ScrollView添加.clipped()，确保内容不会超出容器边界，减少系统对滚动方向的误判：

ScrollView(.horizontal, showsIndicators: false) {
    HStack(spacing: 0) {
        ForEach(someCollection) { collection in
            CollectionButton(collectionType: collection)
        }
   }
}
.frame(height: 56)
.clipped()

补充说明 #

这是iOS 18中SwiftUI ScrollView的已知交互逻辑bug，以上方案通过限制垂直方向的交互或容器范围，均可有效修复该问题。

内容的提问来源于stack exchange，提问作者smekers