How to scroll MaterialTabScroll progammatically?

[J6ey]

Since it's a ScrollView wrapper I tried using ScrollViewReader's scrollTo but that didn't do much. Anything we can use?

[wtmoose]

scrollPosition() is supported. There's an initializer where you provide a binding for the wrapper's scrollPosition() modifier. Then you modify the binding when you want to manipulate the scroll position.

[wtmoose]

Since you never replied, I'm going to assume you're good.

[demon9733]

@wtmoose It looks like #if canImport(ScrollPosition) doesn't work the intended way, making the ScrollPosition APIs not available (notice the grayed out code inside the if).

Just to be clear, the project's min deployment target is iOS 26.

[wtmoose]

That is an Apple API. Are you saying it doesn't work? Or is Xcode not rendering correctly.

[demon9733]

I'm saying it doesn't work. Supposedly because there's no such module as ScrollPosition. Meaning you can't do:

import ScrollPosition

in the file header.

[wtmoose]

Huh. Yeah, that seems pretty obvious now. I honestly don't remember how this shipped and I could swear that I tested it. I'll look into it. I think there was some problem with using availability clauses and I probably got canImport(ScrollPosition) from ChatGPT 🤦‍♂️

[demon9733]

The issue is that this can't be resolved at compile time, since the iOS version the app will run on isn’t known during compilation.

I've separated the ScrollModel implementation for iOS 17 and 18, but I haven't found a clean way to keep a single MaterialTabsScroll. Every approach I've tried ends up requiring separate V17 and V18 variants.

Since I don't have push access to the repo, I'm attaching my split version of the ScrollModel. Hopefully it helps illustrate the approach or gives you some ideas for unifying it.

ScrollModel.swift

import SwiftUI

@available(iOS 17, *)
class ScrollModel17<Item, Tab>: ScrollModel<Item, Tab> where Item: Hashable, Tab: Hashable {

    // MARK: - API

    @Published var scrollItem: Item?
    @Published var scrollUnitPoint: UnitPoint = .top

    func scrollItemChanged(_ item: Item?) {
        scrollItem = item
    }

    func scrollUnitPointChanged(_ unitPoint: UnitPoint) {
        scrollUnitPoint = unitPoint
    }

    override func contentOffsetChanged(_ offset: CGFloat) -> CGFloat {
        let deltaOffset = super.contentOffsetChanged(offset)

        // This is how we're detecting programatic scroll for lack of a better idea. We don't want to report
        // the programatic sync of content offset with the header because it could result in the header moving.
        if scrollItem != reservedItem {
            headerModel?.scrolled(tab: tab, contentOffset: contentOffset, deltaContentOffset: deltaOffset)
        }

        return deltaOffset
    }

    init(tab: Tab, reservedItem: Item? = nil) {
        self.reservedItem = reservedItem
        super.init(tab: tab)
    }

    // MARK: Adjusting scroll and header state

    private let reservedItem: Item?

    override func syncContentOffsetWithHeader(appearance: Bool) {
        super.syncContentOffsetWithHeader(appearance: appearance)

        guard let headerModel else {
            return
        }

        scrollUnitPoint = UnitPoint(
            x: UnitPoint.top.x,
            y: (headerModel.state.headerContext.maxOffset - contentOffset) / (headerModel.state.safeHeight - 1)
        )

        scrollItem = reservedItem

        // It is essential to set the scroll item back to `nil` so that we can make
        // future scroll adjustments. Placing this in a task is sufficient for the
        // above scrolling to occur.
        Task {
            // Could not find a 100% robust way to detect between a programatic scroll and a user scroll, which we
            // need to be able to do to avoid adjusting the header after a programatic scroll. So, sadly, we're going
            // this instead and rely on checking the value of `scrollItem`.
            try? await Task.sleep(for: .seconds(0.05))
            scrollItem = nil
        }
    }
}

@available(iOS 18, *)
class ScrollModel18<Item, Tab>: ScrollModel<Item, Tab> where Item: Hashable, Tab: Hashable {

    // MARK: - API

    @Published var scrollPosition: ScrollPosition = ScrollPosition(idType: Item.self)

    func scrollPositionChanged(_ position: ScrollPosition) {
        scrollPosition = position
    }

    override func contentOffsetChanged(_ offset: CGFloat) -> CGFloat {
        let deltaOffset = super.contentOffsetChanged(offset)
        headerModel?.scrolled(tab: tab, contentOffset: contentOffset, deltaContentOffset: deltaOffset)

        return deltaOffset
    }

    // MARK: Adjusting scroll and header state

    override func syncContentOffsetWithHeader(appearance: Bool) {
        super.syncContentOffsetWithHeader(appearance: appearance)
        scrollPosition = ScrollPosition(point: CGPoint(x: 0.5, y: 150))
    }
}

@MainActor
class ScrollModel<Item, Tab>: ObservableObject where Item: Hashable, Tab: Hashable {

    // MARK: - API

    @Published private(set) var appeared = false
    @Published private(set) var bottomMargin: CGFloat = 0

    @discardableResult
    func contentOffsetChanged(_ offset: CGFloat) -> CGFloat {
        let oldContentOffset = contentOffset
        contentOffset = -offset

        let deltaOffset = contentOffset - oldContentOffset
        return deltaOffset
    }

    func appeared(headerModel: HeaderModel<Tab>?) {
        appeared = true
        self.headerModel = headerModel
        selectedTab = headerModel?.state.headerContext.selectedTab
        syncContentOffsetWithHeader(appearance: true)
        configureBottomMargin()
    }

    func disappeared() {
        appeared = false
    }

    func selectedTabChanged() {
        guard let headerModel else { return }
        selectedTab = headerModel.state.headerContext.selectedTab
    }

    func contentSizeChanged(_ contentSize: CGSize) {
        self.contentSize = contentSize
        configureBottomMargin()
    }

    func headerHeightChanged() {
        syncContentOffsetWithHeader(appearance: false)
    }

    func headerStateChanged() {
        configureBottomMargin()
    }

    init(tab: Tab) {
        self.tab = tab
    }

    // MARK: - Constants

    // MARK: - Variables

    fileprivate let tab: Tab
    fileprivate weak var headerModel: HeaderModel<Tab>?
    fileprivate var contentOffset: CGFloat = 0

    private var cachedTabsState: HeaderModel<Tab>.State?
    private var contentSize: CGSize?

    private var selectedTab: Tab? {
        didSet {
            guard let headerModel else { return }
            switch (oldValue == tab, selectedTab == tab) {
            case (true, false):
                // When switching away from this tab, remember the current data so we can
                // calculate the delta on return.
                cachedTabsState = headerModel.state
            default: break
            }
        }
    }

    // MARK: Configuring the bottom margin

    private func configureBottomMargin() {
        guard let headerModel, let contentSize else { return }
        bottomMargin = max(0, headerModel.state.height - contentSize.height - headerModel.state.headerContext.minTotalHeight)
    }

    // MARK: Adjusting scroll and header state

    /// Scrolls to the desired content offset to maintain continuity when switching tabs after a header height change.
    ///
    /// The formula for calculating the Y component of the unit point for a given item is:
    ///
    /// ````
    /// offset / (scrollView.height - safeArea.top - safeArea.bottom - item.height)
    /// ````
    func syncContentOffsetWithHeader(appearance: Bool) {
        guard appeared, let headerModel,
                tab == headerModel.state.headerContext.selectedTab || appearance,
                headerModel.state.tabsRegistered else { return }
        let deltaHeaderOffset: CGFloat
        if let cachedTabsState {
            deltaHeaderOffset = headerModel.state.headerContext.offset - cachedTabsState.headerContext.offset
        } else {
            deltaHeaderOffset = headerModel.state.headerContext.offset
        }
        cachedTabsState = headerModel.state
        switch headerModel.state.config.crossTabSyncMode {
        case .resetScrollPosition where
            appearance &&
                headerModel.state.headerContext.offset < headerModel.state.headerContext.maxOffset &&
                contentOffset > headerModel.state.headerContext.offset:
            contentOffset = headerModel.state.headerContext.offset
        // Otherwise, preserve the relative content offset between the header and the scroll view.
        default:
            contentOffset = contentOffset + deltaHeaderOffset
        }
    }
}

[wtmoose]

A simple solution would be to cut off support for iOS 17 😄. Not too many people using the library, so I haven't ruled it out. I'll try to find time to look into this over the weekend.

[demon9733]

Any updates here?

[wtmoose]

I'm actively working on removing support for iOS 17, but the iOS 18+ implementation has some bugs I need to fix.

[wtmoose]

@demon9733 I made the changes for mutual ownership of scroll position. You can try running the TestMaterialTabsScroll in PreviewContent. The changes are currently under review in work/fix-repeated-evaluation-on-scroll if you want to take a look. This branch has breaking changes:

Breaking Changes

• Minimum deployment target raised to iOS 18. iOS 17 is no longer supported.
• HeaderContext converted from a struct to an @Observable class to address performance issues related to SwiftData queries. The observable class shields content views from re-performing queries and re-evaluating body on every frame while scrolling. If you stored HeaderContext (or its typealiases MaterialTabsHeaderContext / StickyHeaderContext) by value, you will need to update to reference semantics.
• How to scroll MaterialTabScroll progammatically? #19 MaterialTabsScroll joint scroll position API replaced with iOS 18 ScrollPosition. The old scrollAnchor parameter is replaced by optional scrollPosition and anchor bindings for joint scroll position manipulation between the library and client code.