macosswiftui

SwiftUI macOS Disable Scroll Indicator Background


I'm looking for a way to disable scroll indicator background(of a TextEditor) in SwiftUI, macOS to only show the moving part of the indicator(like in popovers) look at examples below:

What I currently have:

What I currently have

What I'm looking for:

What I'm looking for


Solution

  • Updated to include feedback from OP that original soln proposed doesn't quite completely remove tint.

    On Ventura with Xcode 14 beta 1 it's possible to come very close [0] to achieving the desired effect by adding a background modifier after the .scrollContentBackground(.hidden) extends the background under the scrollbar,

    e.g.

    TextEditor(text: $text)
         .scrollContentBackground(.hidden)
         .background(.cyan)
    

    Where $text is a little snippet of Under Milk Wood gives
    Screen shot showing background colour extending under scrollbar

    Beyond this, afaik SwiftUI's TextEditor doesnt have native api to get closer at the moment. As an alternative though - if working with underlying AppKit components and its trade-offs is acceptable - then nicer styling might be an option.

    For example using the Introspect library to enable the more modern overlay scrollerStyle:

    import Introspect // from https://github.com/siteline/SwiftUI-Introspect
    struct ContentView: View {
        @State var text = demoText
    
        var body: some View {
            TextEditor(text: $text)
                .scrollContentBackground(.hidden)
                .background(.cyan)
                .introspectTextView { (nsV: NSTextView) in
                    DispatchQueue.main.async {
                        nsV.enclosingScrollView?.scrollerStyle = .overlay
                    }
                }
        }
    }
    

    Seems to give quite a nice effect

    Text editor with showing scroll bar using using scrollerStyle .overlay

    [0] The subtle tint that remains, is as can be seen - missable - or at least was for me :-/