平行布局下右侧UIScrollView无法仅垂直滚动问题求助

问题场景 #

在父视图内平行放置两个UIScrollView，要求两者仅支持垂直滚动，但当前右侧ScrollView出现了可水平滚动的异常情况，相关约束代码如下：

ContentView约束代码 #

private func setUpContenViewConstraints(_ contenView: UIView, _ scrollView: UIScrollView) {
    NSLayoutConstraint.activate([
        contenView.leadingAnchor.constraint(equalTo: scrollView.contentLayoutGuide.leadingAnchor),
        contenView.trailingAnchor.constraint(equalTo: scrollView.contentLayoutGuide.trailingAnchor),
        contenView.topAnchor.constraint(equalTo: scrollView.contentLayoutGuide.topAnchor),
        contenView.bottomAnchor.constraint(equalTo: scrollView.contentLayoutGuide.bottomAnchor),
        contenView.widthAnchor.constraint(equalTo: scrollView.frameLayoutGuide.widthAnchor)
    ])
    
    let heightConstraint = contenView.heightAnchor.constraint(equalTo: scrollView.frameLayoutGuide.heightAnchor, constant: 1)
    heightConstraint.priority = .init(1)
    heightConstraint.isActive = true
}

双ScrollView布局约束代码 #

NSLayoutConstraint.activate([
    leftScrollView.widthAnchor.constraint(equalTo: widthAnchor, multiplier: 0.5),
    leftScrollView.leadingAnchor.constraint(equalTo: leadingAnchor),
    leftScrollView.topAnchor.constraint(equalTo: topAnchor),
    leftScrollView.bottomAnchor.constraint(equalTo: bottomAnchor)
])

NSLayoutConstraint.activate([
    rightScrollView.widthAnchor.constraint(equalTo: widthAnchor, multiplier: 0.5),
//    rightScrollView.leadingAnchor.constraint(equalTo: waitingScrollView.trailingAnchor),
    rightScrollView.trailingAnchor.constraint(equalTo: trailingAnchor),
    rightScrollView.topAnchor.constraint(equalTo: topAnchor),
    rightScrollView.bottomAnchor.constraint(equalTo: bottomAnchor)
])

问题原因分析 #

右侧ScrollView出现水平滚动的核心原因：

1. 双ScrollView布局存在约束歧义，右侧ScrollView的leading约束未明确，可能导致实际宽度超出预期；
2. ContentView的宽度约束可能因布局冲突被忽略，使得contentView宽度超出ScrollView可视区域，触发水平滚动。

修复方案 #

1. 补全右侧ScrollView的leading约束 #

取消注释右侧ScrollView的leading约束，修正变量名（原代码中waitingScrollView应为leftScrollView），确保两个ScrollView紧密排列，总宽度严格等于父视图宽度：

NSLayoutConstraint.activate([
    rightScrollView.widthAnchor.constraint(equalTo: widthAnchor, multiplier: 0.5),
    rightScrollView.leadingAnchor.constraint(equalTo: leftScrollView.trailingAnchor),
    rightScrollView.trailingAnchor.constraint(equalTo: trailingAnchor),
    rightScrollView.topAnchor.constraint(equalTo: topAnchor),
    rightScrollView.bottomAnchor.constraint(equalTo: bottomAnchor)
])

2. 确保ContentView宽度约束生效 #

确认setUpContenViewConstraints中contenView.widthAnchor.constraint(equalTo: scrollView.frameLayoutGuide.widthAnchor)的优先级足够高（默认优先级即可），该约束是限制contentView宽度不超过ScrollView可视区域的关键，需保证无其他约束与之冲突。

3. 强制关闭水平滚动属性 #

通过代码直接限制ScrollView的滚动方向，从属性层面杜绝水平滚动：

// 为左右ScrollView统一设置
leftScrollView.showsHorizontalScrollIndicator = false
leftScrollView.alwaysBounceHorizontal = false
rightScrollView.showsHorizontalScrollIndicator = false
rightScrollView.alwaysBounceHorizontal = false

// 若不需要垂直方向的弹性效果，可额外添加
// leftScrollView.bounces = false
// rightScrollView.bounces = false

4. 检查ContentView内部子视图约束 #

确保ContentView内的所有子视图都未超出ContentView宽度范围，比如子视图的trailing约束必须关联到ContentView的trailing anchor，避免子视图将ContentView撑宽。

验证 #

完成上述修改后重新运行项目，右侧ScrollView将仅响应垂直滚动操作，水平方向不会出现滚动行为。

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