UICollectionView Item因Section位置产生偏移问题求助

我之前在做类似需求的时候也碰到过一模一样的问题，这种第二个cell偏移一个cell宽度的情况，大概率是WKWebView的滚动特性和UICollectionView的cell复用机制在搞事情，给你几个亲测有效的解决思路：

1. 先禁用WKWebView自身的滚动 #

既然你是把WKWebView作为cell的内容视图来展示，完全不需要它自己滚动，先把这个特性关掉，避免和UICollectionView的横向滚动互相干扰：

class WebViewCell: UICollectionViewCell {
    let webView = WKWebView()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupWebView()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupWebView()
    }
    
    private func setupWebView() {
        // 禁用WebView自身滚动，这是关键第一步
        webView.scrollView.isScrollEnabled = false
        webView.scrollView.bounces = false
        
        contentView.addSubview(webView)
        // 用约束确保WebView完全铺满contentView，避免布局错位
        webView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            webView.topAnchor.constraint(equalTo: contentView.topAnchor),
            webView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
            webView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),
            webView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor)
        ])
    }
    
    // 复用cell时一定要重置WebView状态，清除上一次的残留
    override func prepareForReuse() {
        super.prepareForReuse()
        // 强制把scrollView的偏移量归位
        webView.scrollView.contentOffset = .zero
        // 如果需要的话，清空之前加载的内容
        webView.loadHTMLString("", baseURL: nil)
    }
}

2. 确保Cell复用逻辑正确 #

在collectionView(_:cellForItemAt:)方法里，不要手动修改cell的frame，完全依赖UICollectionViewLayout的设置，同时加载内容时不要影响布局：

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "WebViewCell", for: indexPath) as! WebViewCell
    // 加载你的目标内容，比如HTML字符串或者URL
    let demoHTML = "<html><body style='margin:0;padding:0'><p>第\(indexPath.item + 1)个WebView内容</p></body></html>"
    cell.webView.loadHTMLString(demoHTML, baseURL: nil)
    return cell
}

3. 检查UICollectionViewLayout的配置 #

如果用的是UICollectionViewFlowLayout，确保itemSize、间距这些参数设置正确，避免额外的间距导致偏移：

// 初始化CollectionView时配置布局
let flowLayout = UICollectionViewFlowLayout()
flowLayout.itemSize = CGSize(width: 100, height: collectionView.bounds.height)
flowLayout.scrollDirection = .horizontal
// 取消行间距和item间距，避免额外空白
flowLayout.minimumLineSpacing = 0
flowLayout.minimumInteritemSpacing = 0
collectionView.collectionViewLayout = flowLayout
// 和UIPageControl绑定的话，记得开启分页
collectionView.isPagingEnabled = true

4. 处理WKWebView加载完成后的偏移 #

有时候WKWebView加载完内容后，会自动调整scrollView的contentSize，导致偏移，可以通过代理方法强制归位：

// 给WebViewCell扩展WKNavigationDelegate
extension WebViewCell: WKNavigationDelegate {
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        // 异步执行，确保布局已经更新完成
        DispatchQueue.main.async {
            webView.scrollView.contentOffset = .zero
        }
    }
}

// 记得在setupWebView里设置代理
private func setupWebView() {
    // 其他设置...
    webView.navigationDelegate = self
}

按照这几个步骤调整后，应该就能解决第二个cell偏移的问题了，核心就是解决WKWebView的滚动状态残留和布局绑定的问题。

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