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'm looking for:
2
-
Can you share the code? Because it is already transparent by default in MacOSgrandsirr– grandsirr2022-10-20 16:00:57 +00:00Commented Oct 20, 2022 at 16:00
-
@GrandSirr It's just a plain TextEditor with background removed: TextEditor(text: $text) .scrollContentBackground(.hidden)devon't– devon't2022-10-20 18:44:22 +00:00Commented Oct 20, 2022 at 18:44
Add a comment
|
2 Answers
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
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
[0] The subtle tint that remains, is as can be seen - missable - or at least was for me :-/
4 Comments
devon't
Yes I'm aware of this, however, when you use solid colors you still can see the 'tinted' version of the scrollbar bg. I found that putting an .ultraThinMaterial (or any other material) gives the desired look, but then obviously it's not the color I want the background to be, BUT I think in my use case this is okay.
shufflingb
Apologies, almost too subtle for my eyes to see - had to break out the colour picker to confirm (thought it was a bit too easy for SwiftUI :-/ ) With a bit more investigation, suspect the desired appearance might be being achieved by the app from the screenshot setting
NSScrollView#scrollerStyle = .overlay, which causes the bar to fade in out over the top of the view it scrolls. Unfortunately I don't think this is can be set directly in SwiftUI, but can do if prepared to access the NSTextView directly. I'll put an addendum on the answer to that effect.devon't
Thanks for all of the info! I'll definitely look into the Introspect.
Markon
This answer saved me from adding more and more workarounds. For whatever reason, when my app (macOS 13) runs on an external monitor, the OS uses legacy mode. Setting the scrollerStyle to .overlay did the trick. Now the only issue I have is that the app starts in legacy mode but then after 0.1-0.2 seconds it switches to .overlay, which is really ugly as a first impression :) Any idea on how this could be solved?
TextEditor(text: $text)
.scrollContentBackground(.hidden)
.background(.clear)
This code works except for when a mouse with a scroll wheel is connected to the Mac instead of a trackpad. When a mouse is connected the scroll bar shows a white background. This happens all over the OS.
