magicuser-theme-for-obsidian icon indicating copy to clipboard operation
magicuser-theme-for-obsidian copied to clipboard

Published 20 hours ago • verified publisher icon drbap

Userfriendlier scrollbars

Open merlinuwe opened this issue 9 months ago • 32 comments

Thanks for your great theme and your offer to help with the css code for a more userfriendly scrollbar experience.

Original post: https://forum.obsidian.md/t/right-scrollbar-of-the-note-too-small-after-clicking/81603/6

.theme-dark {
  --scrollbar-active-thumb-bg: #d300d382;
  --scrollbar-thumb-bg: #a300a382;
}

body:not(.native-scrollbars) div::-webkit-scrollbar {
  width: 15px;
}

body:not(.native-scrollbars) div:active::-webkit-scrollbar {
  width: 30px;
}

body:not(.native-scrollbars) ::-webkit-scrollbar-thumb:hover,
body:not(.native-scrollbars) ::-webkit-scrollbar-thumb:active {
  background-color: var(--scrollbar-active-thumb-bg);
}

Your code is a big step in the right direction. The only thing I'm still missing is that the width of the scrollbar should expand also by hovering the track or the thumb. At the moment I have to click at one of them.

merlinuwe avatar May 11 '24 17:05 merlinuwe

Please check the updated code I posted there too (forum). I edited it just after I posted the first version.

.theme-dark {
  --scrollbar-active-thumb-bg: #d300d382;
  --scrollbar-thumb-bg: #a300a382;
}

body:not(.native-scrollbars) div::-webkit-scrollbar {
  width: 15px;
}

body:not(.native-scrollbars) div:hover::-webkit-scrollbar {
  width: 30px;
}

body:not(.native-scrollbars) ::-webkit-scrollbar-thumb:hover,
body:not(.native-scrollbars) ::-webkit-scrollbar-thumb:active {
  background-color: var(--scrollbar-active-thumb-bg);
}

I changed the active to hover when I read your whole post there. But you got the first version of the code I posted.

Let me know if you need any further assistance. Glad to help and thanks for the words about the theme.

All the best

drbap avatar May 11 '24 18:05 drbap

I also hope to add the option to customize the scrollbar as a theme feature in upcoming updates.

Thanks for the suggestion.

All the best

drbap avatar May 11 '24 18:05 drbap

I changed it in my productive and test vault to the updated version that you mentioned in your last email.

When I hover over one of the tree panel-areas, the scrollbar (thumb and invisible track) gets broader. When I switch to the next area, the lost area shows a smaller scrollbar and the new hovered area shows a broader scrollbar.

Is it possible to broaden the scrollbar only when the scrollbar (not: the area) is hovered?

merlinuwe avatar May 11 '24 19:05 merlinuwe

Please check the code below. Let me know if it is useful for you.

.theme-dark {
  --scrollbar-active-thumb-bg: #d300d382;
  --scrollbar-thumb-bg: #a300a382;
}

body:not(.native-scrollbars) ::-webkit-scrollbar {
  width: 15px;
}

body:not(.native-scrollbars) ::-webkit-scrollbar-thumb:hover,
body:not(.native-scrollbars) ::-webkit-scrollbar-thumb:active {
  background-color: var(--scrollbar-active-thumb-bg);
  border: 10px solid var(--scrollbar-active-thumb-bg);
  outline: 10px solid var(--scrollbar-active-thumb-bg);
}

I can polish it more too.

EDIT: I updated the code, please try again. Remember to test the one using the outline (bigger scrollbar thumb). Add the size you want (outline). You can also make the width of 20px (>15px).

The best solution for this would be to use JavaScript.

All the best

drbap avatar May 11 '24 20:05 drbap

Oh yes, the last code you sent me is better.

Is it possible to show also a broader track when hovering? The problem isn't only to catch the thumb but also the track to navigate to an other location of the note.

Perhaps optional buttons with arrows at the top and bottom of the track?

(I have seen, when the track gets broader, the visual look of the note contents springs, at least with broad note content.)

merlinuwe avatar May 12 '24 09:05 merlinuwe

Here is the code for the improved scrollbar. Track is 30px now. I hope it will be easier to use. Please check it out below.

.theme-dark {
  --scrollbar-active-thumb-bg: #d300d382;
  --scrollbar-thumb-bg: #a300a382;
}

body:not(.native-scrollbars) ::-webkit-scrollbar {
  width: 30px;
}

body:not(.native-scrollbars) ::-webkit-scrollbar-thumb {
  border: 8px solid transparent;
}

body:not(.native-scrollbars) ::-webkit-scrollbar-thumb:hover,
body:not(.native-scrollbars) ::-webkit-scrollbar-thumb:active {
  background-color: var(--scrollbar-active-thumb-bg);
  border: 8px solid var(--scrollbar-active-thumb-bg);
}

If it is working well for you, you can close the issue.

All the best

drbap avatar May 12 '24 14:05 drbap

I like the Scrollbar hover expand function

Thank you

fredjoe7 avatar May 12 '24 15:05 fredjoe7

Thanks for the feedback 👍 .

Question: Would you like this feature to be included in the magicuser theme as a toggle (like enabling enhanced scrollbars?). I can also add the option so you can set the scrollbar width and scrollbar thumb color. I just need to check how it looks on mobile (iOS and Android).

All the best

drbap avatar May 12 '24 15:05 drbap

Here is the code for the improved scrollbar. Track is 30px now. I hope it will be easier to use. Please check it out below.

.theme-dark {
  --scrollbar-active-thumb-bg: #d300d382;
  --scrollbar-thumb-bg: #a300a382;
}

body:not(.native-scrollbars) ::-webkit-scrollbar {
  width: 30px;
}

body:not(.native-scrollbars) ::-webkit-scrollbar-thumb {
  border: 8px solid transparent;
}

body:not(.native-scrollbars) ::-webkit-scrollbar-thumb:hover,
body:not(.native-scrollbars) ::-webkit-scrollbar-thumb:active {
  background-color: var(--scrollbar-active-thumb-bg);
  border: 8px solid var(--scrollbar-active-thumb-bg);
}

If it is working well for you, you can close the issue.

All the best

Ah, the scrollbar is now visible without affecting the size or line break of the notes. It also no longer looks "cut off". Very, very well done.

The only problem is the currently still invisible track. It should be the same width as the thumb so you can hit it just as easily. The thumb is not used exclusively. Sometimes you also want to jump to ~ 2/3 of the note, for example, then you click on the track. It should be just as wide as the thumb. The track should only be displayed when the thumb or the track is hovered.

I changed the width of the thumb from 30px to 20px, and I think that will be enough for most normal users. But for me 30px is the best.

I just saw that you wrote me an email. Ideally the user should be able to set the parameters in a "scrollable" section:

  • Width of the thumbs/track (without hover)

  • Width of the thumbs/track (with hover)

  • Visibility of the track (on/off)

  • Color of the thumbs (I like your colors MagicUser Moon #d300d382 / #a300a382 better than my own contrast color #c81c80 )

When I look into the settings I see that the scrollbar is in optical conflict with the "x".

image

Thank you very much. I really appreciate your commitment.

merlinuwe avatar May 12 '24 15:05 merlinuwe

So I will improve it more. Stay tuned. I will post it soon.

drbap avatar May 12 '24 16:05 drbap

Thanks for the feedback 👍 .

Question: Would you like this feature to be included in the magicuser theme as a toggle (like enabling enhanced scrollbars?). I can also add the option so you can set the scrollbar width and scrollbar thumb color. I just need to check how it looks on mobile (iOS and Android).

All the best

Yes definitely will be a useful feature. I had myself found it hard to use the Scrollbars before as it was narrow and difficult to click it. With the option to adjust the width and color while hovering and without hovering, it will be a nice addition to magicuser theme. You can even think about giving it a laser finish while hovering haha.

fredjoe7 avatar May 12 '24 16:05 fredjoe7

Here it is my friends. The track is now visible when hovering (track and/or thumb). It will become transparent when not hovering it.

.theme-dark {
  --scrollbar-active-thumb-bg: #d300d382;
  --scrollbar-thumb-bg: #a300a382;
}

body:not(.native-scrollbars) ::-webkit-scrollbar {
  width: 30px;
}

body:not(.native-scrollbars) ::-webkit-scrollbar-track {
  background-color: transparent;
}

body:not(.native-scrollbars) ::-webkit-scrollbar-track:hover {
  background-color: #82828220;
}

body:not(.native-scrollbars) ::-webkit-scrollbar-thumb {
  border: 8px solid transparent;
}

body:not(.native-scrollbars) ::-webkit-scrollbar-thumb:hover,
body:not(.native-scrollbars) ::-webkit-scrollbar-thumb:active {
  background-color: var(--scrollbar-active-thumb-bg);
  border: 8px solid var(--scrollbar-active-thumb-bg);
}

.modal.mod-settings.mod-sidebar-layout .modal-close-button {
  margin-right: 20px;
}

Ah, I also fixed the close settings button, please test it too.

Let me know if this is working better for you.

All the best

drbap avatar May 12 '24 16:05 drbap

Thanks for the feedback 👍 . Question: Would you like this feature to be included in the magicuser theme as a toggle (like enabling enhanced scrollbars?). I can also add the option so you can set the scrollbar width and scrollbar thumb color. I just need to check how it looks on mobile (iOS and Android). All the best

Yes definitely will be a useful feature. I had myself found it hard to use the Scrollbars before as it was narrow and difficult to click it. With the option to adjust the width and color while hovering and without hovering, it will be a nice addition to magicuser theme. You can even think about giving it a laser finish while hovering haha.

😄 Yes, I like laser look. Thanks for the feedback.

drbap avatar May 12 '24 16:05 drbap

I will make the default scrollbar larger in magicuser, so it will be easier to use.

drbap avatar May 12 '24 16:05 drbap

How fast are you? ;-)

When hovering the track, the thumb should also get broader. But thats more optical or personal preference, not functionality. The functionality is already implemented.

The closing cross (x) has moved out of the way - presumably out of respect for your abilities. ;-)

merlinuwe avatar May 12 '24 16:05 merlinuwe

I can't make it using hover because of CSS limitations, but I could make it bigger when you click on the track (to reduce it, just click in other area like the text editor when you focus in other area). Please check it out below.

.theme-dark {
  --scrollbar-active-thumb-bg: #d300d382;
  --scrollbar-thumb-bg: #a300a382;
}

body:not(.native-scrollbars) ::-webkit-scrollbar {
  width: 30px;
}

body:not(.native-scrollbars) ::-webkit-scrollbar-track {
  background-color: transparent;
}

body:not(.native-scrollbars) ::-webkit-scrollbar-track:hover {
  background-color: #82828220;
}

body:not(.native-scrollbars) ::-webkit-scrollbar-thumb {
  border: 8px solid transparent;
  background-color: var(--scrollbar-thumb-bg);
}

body:not(.native-scrollbars) div:focus::-webkit-scrollbar-thumb,
body:not(.native-scrollbars) ::-webkit-scrollbar-thumb:hover,
body:not(.native-scrollbars) ::-webkit-scrollbar-thumb:active {
  background-color: var(--scrollbar-active-thumb-bg);
  border: 8px solid var(--scrollbar-active-thumb-bg);
}

.modal.mod-settings.mod-sidebar-layout .modal-close-button {
  margin-right: 20px;
}

drbap avatar May 12 '24 16:05 drbap

I hope it's better this way. I'm already dreaming about this issue! :smile:

drbap avatar May 12 '24 17:05 drbap

tried the last one for me in reader mode the scroll bar was kept expanded persistently without even hovering or clicking.

fredjoe7 avatar May 12 '24 17:05 fredjoe7

If I click in the track of a short note, the thumb will be hovered automatically, because it runs to the point where the click has be done.

@fredjoe7 I can confirm: In edit mode, once the thumb is clicked, it is broad. To make it small, one has to click into the note. But in edit mode, the next likely step after scrolling is to click into the text to edit.

Nevertheless, I would release the implementation as it is.

My TestVault:

SYSTEM INFO: Obsidian version: v1.5.12 Installer version: v1.5.12 Operating system: Windows 10 Home 10.0.19045 Login status: not logged in Insider build toggle: off Live preview: off Base theme: dark Community theme: MagicUser v19.6.0 Snippets enabled: 2 Restricted mode: off Plugins installed: 13 Plugins enabled: 1 1: Style Settings v1.0.8

My productive Vault:

SYSTEM INFO: Obsidian version: v1.5.12 Installer version: v1.5.12 Operating system: Windows 10 Home 10.0.19045 Login status: not logged in Insider build toggle: off Live preview: off Base theme: dark Community theme: none Snippets enabled: 30 Restricted mode: off Plugins installed: 145 Plugins enabled: 57 1: Table Sorting v1.4.0 2: Admonition v10.2.0 3: Advanced Tables v0.21.0 4: Advanced URI v1.40.1 5: Android nomedia v0.1.0 6: Auto Link Title v1.5.4 7: Beautitab v1.6.1 8: Better Export PDF v1.8.0 9: Commander v0.5.1 10: Copy document as HTML v0.7.0 11: Creases v0.7.0 12: Custom Classes v2.6.1 13: Dataview v0.5.66 14: Dictionary v2.22.0 15: Editing Toolbar v2.4.16 16: Editor Commands Remap v1.0.2 17: Editor Syntax Highlight v0.1.3 18: Excel to Markdown Table v0.4.0 19: Excel v1.3.24 20: Execute Code v1.11.1 21: Export Image plugin v2.3.10 22: File Explorer Note Count v1.2.1 23: Google Calendar v1.10.14 24: Homepage v3.8.0 25: Local Backup v0.1.7 26: Minimal Theme Settings v7.5.0 27: Natural Language Dates v0.6.2 28: Navigate Cursor History v1.1.0 29: Note Toolbar v1.7.22 30: Number Headings v1.16.0 31: Omnisearch v1.22.2 32: Paste image rename v1.6.1 33: Quick Explorer v0.2.8 34: Quiet Outline v0.3.28 35: Recent Files v1.3.10 36: Scroll to Top v2.1.4 37: Set View Mode per Note v1.0.3 38: Show Current File Path v0.5.2 39: Status Bar Organizer v1.3.0 40: Sticky Headings v1.2.0 41: Style Settings v1.0.8 42: Supercharged Links v0.12.1 43: Symbols Prettifier v1.1.1 44: Tasks v7.1.0 45: Templater v2.3.1 46: Text Extractor v0.5.1 47: Todo sort v1.0.0 48: Vault Statistics v0.1.3 49: Webpage HTML Export v1.8.01 50: Zoom v1.1.2 51: markdown export v1.0.20 52: Linter v1.24.0 53: Share my plugin list v0.3.3 54: Vault Changelog v0.1.0 55: Translate v1.4.7 56: TinyChart v0.1.1 57: File Tree Alternative v2.5.7

merlinuwe avatar May 12 '24 17:05 merlinuwe

Getting more complex...

.theme-dark {
  --scrollbar-active-thumb-bg: #d300d382;
  --scrollbar-thumb-bg: #a300a382;
}

body:not(.native-scrollbars) ::-webkit-scrollbar {
  width: 30px;
}

body:not(.native-scrollbars) ::-webkit-scrollbar-track {
  background-color: transparent;
}

body:not(.native-scrollbars) ::-webkit-scrollbar-track:hover {
  background-color: #82828220;
}

body:not(.native-scrollbars) .markdown-reading-view>div:hover ::-webkit-scrollbar-thumb,
body:not(.native-scrollbars) ::-webkit-scrollbar-thumb {
  border: 8px solid transparent;
  background-color: var(--scrollbar-thumb-bg);
}

body:not(.native-scrollbars) .markdown-reading-view div:active::-webkit-scrollbar-thumb,
body:not(.native-scrollbars) div:not(.markdown-reading-view)>div:focus::-webkit-scrollbar-thumb,
body:not(.native-scrollbars) ::-webkit-scrollbar-thumb:hover,
body:not(.native-scrollbars) ::-webkit-scrollbar-thumb:active {
  background-color: var(--scrollbar-active-thumb-bg);
  border: 8px solid var(--scrollbar-active-thumb-bg);
}

.modal.mod-settings.mod-sidebar-layout .modal-close-button {
  margin-right: 20px;
}

drbap avatar May 12 '24 17:05 drbap

Double laser would be a problem when there is a query.

image

merlinuwe avatar May 12 '24 17:05 merlinuwe

In reading mode you have to click and hold... I don't have the amount of events as a programming language using CSS. So reading mode it is a bit different than source and live preview.

drbap avatar May 12 '24 17:05 drbap

With the latest css:

When I click into the note in view mode, the thumb hovers.

merlinuwe avatar May 12 '24 17:05 merlinuwe

Ok, hold on I will fix it. Thanks

drbap avatar May 12 '24 17:05 drbap

Well, I think this solution is the most consistent one...

.theme-dark {
  --scrollbar-active-thumb-bg: #d300d382;
  --scrollbar-thumb-bg: #a300a382;
}

body:not(.native-scrollbars) ::-webkit-scrollbar {
  width: 30px;
}

body:not(.native-scrollbars) ::-webkit-scrollbar-track {
  background-color: transparent;
}

body:not(.native-scrollbars) ::-webkit-scrollbar-track:hover {
  background-color: #82828220;
}

body:not(.native-scrollbars) ::-webkit-scrollbar-thumb {
  border: 8px solid transparent;
  background-color: var(--scrollbar-thumb-bg);
}

body:not(.native-scrollbars) ::-webkit-scrollbar-thumb:hover,
body:not(.native-scrollbars) ::-webkit-scrollbar-thumb:active {
  background-color: var(--scrollbar-active-thumb-bg);
  border: 8px solid var(--scrollbar-active-thumb-bg);
}

.modal.mod-settings.mod-sidebar-layout .modal-close-button {
  margin-right: 20px;
}

I can make an improved version of this scrollbar experience using a plugin to control the scrollbars better, I don't want to disable some pointer events in usual divs that could affect some functionality of the software or other plugins. A plugin could provide more options.

The above code will make the scrollbar thumb bigger when you hover over it. Not by clicking on the scroll bar track. But this experience will be consistent across all three modes. I don't like the idea of having a scrollbar experience in live preview/source mode and another type of experience when using reading mode.

The above solution is solid and consistent (3 modes). I recommend using this one. Please let me know if you have any problems using the above code.

drbap avatar May 12 '24 18:05 drbap

When I add this to magicuser, the thumb will be neutral color (same color as the current one), but you will be able to select the scrollbars width, the size and color of the thumb.

drbap avatar May 12 '24 18:05 drbap

The current version fits my needs. I completely agree with your assessment, so I follow your recommendation.

Will the tracks with automagically follow the tumbs width?

merlinuwe avatar May 12 '24 19:05 merlinuwe

I'll be delving into additional scrollbar functionalities making a plugin very soon. Building on the foundation of this CSS solution, I'll be leveraging TypeScript/JavaScript to unlock more event options and user interactions.

While I'm still exploring the full range of potential features, here are some initial ideas:

  • Customization Options.
  • Advanced Interactions: Exploring plugin options might unlock possibilities for advanced scrollbar interactions, such as contextual menus, autoscroll or enhanced scrolling behaviors (smoother scroll).

Stay tuned, it should be ready soon

drbap avatar May 12 '24 19:05 drbap

Will the tracks with automagically follow the tumbs width?

Yes, my friend. Related to the theme you will be able to select the track color as well

Theme features (related to scrollbars):

  • Scrollbar width.
  • Scrollbar thumb color.
  • Scrollbar thumb size.
  • Scrollbar track color (track will have the same width of the thumb when hovering it).

Other features and nuances -> plugin

drbap avatar May 12 '24 19:05 drbap

Yes, you are on the right track with your ideas.

I can't wait to see the next release of your theme and also the plugin.

Many thanks from an impressed user. ;-)

merlinuwe avatar May 12 '24 19:05 merlinuwe