Home > Mobile >  SwiftUI macOS Disable Scroll Indicator Background
SwiftUI macOS Disable Scroll Indicator Background

Time:10-22

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

CodePudding user response:

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 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 :-/

  • Related