I’ll share the scrollbar snippet I use. It keeps the scroll bars mostly invisible, but they have a width that is still easy to grab. I’m open to suggestions to make it better, but this works well for me on a 4k screen. I admit with a very long document it can be hard to know where the indicator is, but just clicking on the “track” brings it to your pointer while moving you up or down the document.
You can see in the screenshot that the selection track is wide, and in the gif you can see the thumb is hidden until hover. The color is not hard coded, so it works on light and dark mode. It’s the interactive-accent color you use, or change it in the css to whatever.
::-webkit-scrollbar {
visibility: hidden;
width: 25px !important;
}
::-webkit-scrollbar:hover {
visibility: initial;
}
::-webkit-scrollbar-thumb {
visibility: hidden;
background-color: var(--interactive-accent) !important;
border-left: 18px solid transparent;
border-radius: 0px !important;
}
::-webkit-scrollbar-thumb:hover {
visibility: initial;
background-color: var(--interactive-accent) !important;
border-left: 18px solid transparent;
border-radius: 0px !important;
}