ScrollView嵌套CollectionView缩放后无法滚动至顶部的解决方案

你当前的问题核心在于外层ScrollView缩放时，没有同步更新CollectionView的尺寸和自身的contentOffset逻辑，同时内外两层滚动视图的交互冲突，导致缩放后滚动边界计算错误，无法滚到顶部。要实现PDF式的流畅体验，需要让外层ScrollView完全接管滚动和缩放，同时动态适配CollectionView的尺寸。

解决方案步骤 #

• 禁用CollectionView的滚动，让外层ScrollView负责所有滚动操作
• 缩放时同步更新CollectionView的frame和contentSize，匹配缩放比例
• 在缩放完成后修正ScrollView的contentOffset，确保内容边界正确
• 优化双击缩放的坐标计算，适配缩放后的坐标体系

修改后的完整代码 #

import UIKit

class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate {
    
    static let cellId = "CellId"

    var collectionView: UICollectionView?
    var scrollView: UIScrollView?
    // 记录原始内容尺寸
    private var originalContentSize: CGSize!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        let layout = UICollectionViewFlowLayout()
        layout.itemSize = CGSize(width: view.frame.width, height: view.frame.height)
        layout.scrollDirection = .vertical
        layout.minimumLineSpacing = 0
        layout.minimumInteritemSpacing = 0
        layout.sectionInset = UIEdgeInsets.zero

        collectionView = UICollectionView(frame: CGRect(origin: .zero, size: self.view.frame.size), collectionViewLayout: layout)
        collectionView!.register(ZoomableCell.self, forCellWithReuseIdentifier: "singleCell")
        collectionView!.delegate = self
        collectionView!.dataSource = self
        // 禁用CollectionView自身滚动，交给外层ScrollView处理
        collectionView!.isScrollEnabled = false
        
        scrollView = UIScrollView(frame: self.view.frame)
        self.view.addSubview(scrollView!)
        scrollView!.addSubview(collectionView!)
        scrollView!.delegate = self
        scrollView!.maximumZoomScale = 3
        scrollView!.minimumZoomScale = 1.0
        
        // 初始化原始内容尺寸
        originalContentSize = CGSize(width: view.frame.width, height: view.frame.height * 10)
        collectionView!.frame = CGRect(origin: .zero, size: originalContentSize)
        
        let doubleTapGestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(doubleTapGesture(_:)))
        doubleTapGestureRecognizer.numberOfTapsRequired = 2
        scrollView!.addGestureRecognizer(doubleTapGestureRecognizer)
    }
    
    @objc
    private func doubleTapGesture(_ sender: UITapGestureRecognizer) {
        guard let scrollView = scrollView else { return }
        
        if scrollView.zoomScale > 1.0 {
            scrollView.setZoomScale(1.0, animated: true)
        } else {
            // 转换点击坐标到ScrollView的content坐标系
            let touchPoint = sender.location(in: scrollView)
            let zoomRect = zoomRectForScale(scale: 1.5, center: touchPoint)
            scrollView.zoom(to: zoomRect, animated: true)
        }
    }

    func zoomRectForScale(scale:CGFloat, center: CGPoint) -> CGRect{
        var zoomRect = CGRect()
        zoomRect.size.height = view.frame.height / scale
        zoomRect.size.width = view.frame.width / scale
        // 基于ScrollView的contentOffset计算缩放原点
        zoomRect.origin.x = center.x - zoomRect.size.width / 2.0
        zoomRect.origin.y = center.y - zoomRect.size.height / 2.0
        return zoomRect
    }
    
    func numberOfSections(in collectionView: UICollectionView) -> Int {
        return 1
    }
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 10
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "singleCell", for: indexPath) as! ZoomableCell
        cell.imageView.image = UIImage(named:"test")
        return cell
    }
}

extension ViewController: UIScrollViewDelegate {
    func viewForZooming(in scrollView: UIScrollView) -> UIView? {
        return collectionView
    }
    
    // 缩放过程中动态更新CollectionView尺寸
    func scrollViewDidZoom(_ scrollView: UIScrollView) {
        guard let collectionView = collectionView else { return }
        
        let scale = scrollView.zoomScale
        // 根据缩放比例更新CollectionView的frame
        collectionView.frame = CGRect(
            origin: .zero,
            size: CGSize(
                width: originalContentSize.width * scale,
                height: originalContentSize.height * scale
            )
        )
    }
    
    // 缩放完成后修正contentOffset，确保滚动边界正确
    func scrollViewDidEndZooming(_ scrollView: UIScrollView, with view: UIView?, atScale scale: CGFloat) {
        let contentSize = scrollView.contentSize
        let boundsSize = scrollView.bounds.size
        
        // 修正横向偏移
        var offsetX = scrollView.contentOffset.x
        if contentSize.width < boundsSize.width {
            offsetX = (boundsSize.width - contentSize.width) / 2.0
        } else if scrollView.contentOffset.x < 0 {
            offsetX = 0
        }
        
        // 修正纵向偏移
        var offsetY = scrollView.contentOffset.y
        if contentSize.height < boundsSize.height {
            offsetY = (boundsSize.height - contentSize.height) / 2.0
        } else if scrollView.contentOffset.y < 0 {
            offsetY = 0
        }
        
        scrollView.contentOffset = CGPoint(x: offsetX, y: offsetY)
    }
}

class ZoomableCell: UICollectionViewCell {
    var imageView: UIImageView!

    required init(coder aDecoder:NSCoder){
        super.init(coder: aDecoder)!
        setup()
    }

    override init(frame:CGRect){
        super.init(frame:frame)
        setup()
    }

    func setup() {
        imageView = UIImageView(frame: contentView.bounds)
        imageView.contentMode = .scaleAspectFit
        contentView.addSubview(imageView)
    }
}

关键修改点说明 #

1. 禁用CollectionView滚动：设置collectionView!.isScrollEnabled = false，避免内外滚动视图的手势冲突，让外层ScrollView完全控制滚动行为
2. 动态更新CollectionView尺寸：在scrollViewDidZoom中根据当前缩放比例，同步更新CollectionView的frame，确保内容整体适配缩放比例
3. 修正缩放后的contentOffset：在scrollViewDidEndZooming中计算并调整contentOffset，保证缩放后内容不会出现无法滚动到顶部/底部的情况
4. 优化双击缩放坐标：将手势识别器添加到外层ScrollView，并基于ScrollView的content坐标系计算缩放区域，确保双击缩放位置准确

内容的提问来源于stack exchange，提问作者Anh Phuong Bui