iOS ScrollView分页问题：ContentView2点击非按钮区域跳转异常

核心问题 #

你的代码存在两个关键错误：

1. ScrollView自身宽度设置错误：你将allRecordsScrollView的宽度设为屏幕的2倍，导致ScrollView的frame超出屏幕右侧，触摸事件传递逻辑混乱。
2. 不必要的视图隐藏操作：切换页面时隐藏contentView1/contentView2，破坏了ScrollView的分页布局逻辑，同时导致触摸事件异常。

修正步骤 #

1. 修正ScrollView的约束配置

将ScrollView的宽度约束改为与父视图（屏幕）宽度一致，移除手动设置的contentSize，通过子视图约束让ScrollView自动计算contentSize：

修改后的ScrollView初始化代码：

private var allRecordsScrollView: UIScrollView = {
    let allRecordsScrollView = UIScrollView()
    allRecordsScrollView.isPagingEnabled = true
    allRecordsScrollView.contentInsetAdjustmentBehavior = .never
    allRecordsScrollView.showsHorizontalScrollIndicator = false
    allRecordsScrollView.translatesAutoresizingMaskIntoConstraints = false
    // 移除手动设置的contentSize，由约束自动计算
    return allRecordsScrollView
}()

修改configureUI中的ScrollView约束：

private func configureUI(){
    view.addSubview(allRecordsScrollView)
    NSLayoutConstraint.activate([
        allRecordsScrollView.topAnchor.constraint(equalTo: view.topAnchor),
        allRecordsScrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
        // 修正：ScrollView宽度与父视图一致
        allRecordsScrollView.widthAnchor.constraint(equalTo: view.widthAnchor),
        allRecordsScrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
    ])
    
    allRecordsScrollView.addSubview(contentView1)
    allRecordsScrollView.addSubview(contentView2)
    NSLayoutConstraint.activate([
        // contentView1约束：宽度等于屏幕宽度，填满ScrollView垂直方向
        contentView1.topAnchor.constraint(equalTo: allRecordsScrollView.topAnchor),
        contentView1.bottomAnchor.constraint(equalTo: allRecordsScrollView.bottomAnchor),
        contentView1.leadingAnchor.constraint(equalTo: allRecordsScrollView.leadingAnchor),
        // 修正：宽度等于父视图（屏幕）宽度
        contentView1.widthAnchor.constraint(equalTo: view.widthAnchor),
        contentView1.heightAnchor.constraint(equalTo: allRecordsScrollView.heightAnchor),
        
        // contentView2约束：紧跟contentView1右侧，宽度同样等于屏幕宽度
        contentView2.topAnchor.constraint(equalTo: allRecordsScrollView.topAnchor),
        contentView2.bottomAnchor.constraint(equalTo: allRecordsScrollView.bottomAnchor),
        contentView2.leadingAnchor.constraint(equalTo: contentView1.trailingAnchor),
        contentView2.widthAnchor.constraint(equalTo: view.widthAnchor),
        contentView2.heightAnchor.constraint(equalTo: allRecordsScrollView.heightAnchor),
        
        // 确保contentView2的右侧与ScrollView的content右侧对齐，让ScrollView正确计算contentSize
        contentView2.trailingAnchor.constraint(equalTo: allRecordsScrollView.contentLayoutGuide.trailingAnchor)
    ])
}

2. 移除视图隐藏逻辑，简化按钮点击事件

不需要隐藏任何视图，ScrollView的分页功能会自动控制显示对应页面：

@objc func recordButtonTapped() {
    print("Record button tapped.")
    // 滚动到contentView2的位置：x偏移为屏幕宽度
    let xOffset = view.bounds.width
    allRecordsScrollView.setContentOffset(CGPoint(x: xOffset, y: 0), animated: true)
}

@objc func stopRecordButtonTapped(){
    print("Stop record button tapped.")
    // 滚动回contentView1的位置
    allRecordsScrollView.setContentOffset(CGPoint(x: 0, y: 0), animated: true)
}

3. 初始化时移除contentView2的隐藏设置

修改contentView2的初始化代码：

private var contentView2: UIView = {
    let contentView2 = UIView()
    contentView2.translatesAutoresizingMaskIntoConstraints = false
    contentView2.backgroundColor = UIColor(named: "Green")
    // 移除isHidden设置
    return contentView2
}()

原理说明 #

• ScrollView的自身frame应该与可视区域（屏幕）一致，其可滚动的内容区域由contentSize决定，通过子视图的约束可以让系统自动计算contentSize，避免手动设置的误差。
• 隐藏视图会导致该视图的触摸事件被屏蔽，但ScrollView的分页逻辑依赖于完整的内容布局，隐藏视图会破坏这种布局，导致触摸区域的响应异常。

内容的提问来源于stack exchange，提问作者Kerem DEMİR