双UICollectionView联动滚动：顶部背景无法随底部滚动移动求助

问题场景 #

ViewController中包含两个UICollectionView：

• 顶部为水平滚动的storiesCollectionView
• 下方为垂直滚动的feedCollectionView
  布局模仿Instagram首页的故事栏+信息流结构。尝试通过scrollViewDidScroll实现联动滚动，但顶部collectionView的背景始终停留在屏幕上，无法随底部滚动移动，期望实现与Instagram首页一致的滚动效果。

现有代码 #

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    if feedCollectionView == scrollView {
        var scrollBounds = storiesCollectionView.bounds
        scrollBounds.origin.y = feedCollectionView.contentOffset.y
        storiesCollectionView.bounds = scrollBounds
    }
}

问题原因 #

你当前修改的是storiesCollectionView的bounds属性，bounds控制的是视图内部内容的显示区域，修改bounds.origin.y只会让视图内的内容向上偏移，但视图本身在父视图中的位置没有改变，因此视图的背景会停留在原位置。

解决方案 #

方案1：调整顶部视图的Frame实现跟随滚动 #

直接修改storiesCollectionView在父视图中的位置（即frame.origin.y），让它跟随feedCollectionView的滚动偏移移动：

// 先记录storiesCollectionView的初始Y位置，在viewDidLoad中赋值
private var originalStoriesY: CGFloat = 0

override func viewDidLoad() {
    super.viewDidLoad()
    originalStoriesY = storiesCollectionView.frame.origin.y
    // 其他初始化代码...
}

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    guard scrollView == feedCollectionView else { return }
    let offsetY = feedCollectionView.contentOffset.y
    var newFrame = storiesCollectionView.frame
    // 让stories跟随feed向上滚动，直到完全移出屏幕
    newFrame.origin.y = originalStoriesY - offsetY
    // 限制最小Y值，避免视图过度偏移
    newFrame.origin.y = max(-storiesCollectionView.frame.height, newFrame.origin.y)
    storiesCollectionView.frame = newFrame
}

方案2：将故事栏作为信息流的Section Header（更贴近Instagram实现） #

这是更推荐的实现方式，将storiesCollectionView嵌入到feedCollectionView的section header中，这样它会自然跟随信息流滚动，还能轻松实现"悬浮顶部"的效果：

1. 注册并实现feedCollectionView的header：

override func viewDidLoad() {
    super.viewDidLoad()
    feedCollectionView.register(StoriesHeaderView.self, forSupplementaryViewOfKind: UICollectionView.elementKindSectionHeader, withReuseIdentifier: "StoriesHeader")
    // 其他初始化代码...
}

func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
    let header = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "StoriesHeader", for: indexPath) as! StoriesHeaderView
    // 配置header中的storiesCollectionView
    header.storiesCollectionView.dataSource = self
    header.storiesCollectionView.delegate = self
    return header
}

// 设置header大小
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
    return CGSize(width: collectionView.bounds.width, height: 100) // 对应stories栏的高度
}

2. 若需要实现header悬浮效果，使用布局的悬浮属性：

// 以FlowLayout为例
if let flowLayout = feedCollectionView.collectionViewLayout as? UICollectionViewFlowLayout {
    flowLayout.sectionHeadersPinToVisibleBounds = true
}

这种方式无需手动处理滚动联动，系统会自动处理滚动逻辑，完全匹配Instagram的交互效果。

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