Visibility of scroll bar in main UI

[elhananjair]

How to use GitHub

• Please use the 👍 reaction to show that you are interested into the same feature.
• Please don't comment if you have no relevant information to add. It's just extra noise for everyone subscribed to this issue.
• Subscribe to receive notifications on status change and new comments.

Is your feature request related to a problem? Please describe.
I am having a problem on scrolling in both vertical and horizontal scrolls in Nextcloud UI. The color of the scroll and the width is too small.

Describe the solution you'd like
Using visible color like dark gray or any visible color would fix this thing, and widen the scroll will be good for easy use of scrolls.

Describe alternatives you've considered

Additional context
Nextcloud Version: 20.0.2
Web Browser: Microsoft Edge Version 87.0.664.57
Thank you so much

[szaimen]

Hi, could you please post a screenshot of what you are talking about?
Thank you!

[elhananjair]

@szaimen Thank you for your reply.

I think it would be best if the scroll bar color is solid enough on hover and clicked events, sometimes when I use old projectors I can't see the scroll bars very well.

[szaimen]

I think it would be best if the scroll bar color is solid enough on hover and clicked events

cc @nextcloud/designers does this make sense?

[skjnldsv]

We increased the size with nc20 iirc.
We could up the size even more @jancborchardt

[shavs]

I think the scrollbar size appears to be problematic on Firefox, where scrollbar-width: thin is being used to determine the width of the scrollbar.

I am using Firefox Developer Edition, 90.0b12 (64-bit) to show this, but scrollbar-width: thin has been available since Firefox 64.

I am also using Arch Linux as my client's OS, up to date to current (10/07/2021).

---

Without scrollbar-width: thin; (unchecked in Firefox dev tools):

normal.mp4

With scrollbar-width: thin; (Nextcloud 21.0.3 default):

thin.mp4

---

As a comparison to Chromium, here is a screenshot showing (in order):

• Firefox (with scrollbar-width unchecked),
• Firefox (Nextcloud 21.0.3)
• Chromium (Version 91.0.4472.114 (Official Build)) (Nextcloud 21.0.3)

---

Is it possible to get scrollbar-width: thin; removed in future releases of Nextcloud? If it isn't, is it possible to provide a user-level configuration to change this?

[raimund-schluessler]

Is it possible to provide a user-level configuration to change this?

You can use the custom CSS app to adjust every CSS setting you like to within Nextcloud.

[shavs]

@raimund-schluessler That's good to know!

I think this change (if possible) should be put upstream though, as I think the "standard" Firefox scrollbar should be wide enough that it matches the current sizes defined for Webkit-based browsers (12px, according to the current *-server.css file).

For reference (in the order presented in the screenshot):

• Firefox - without scrollbar-width: thin;: 12px
• Firefox - with scrollbar-width: thin;: 6px
• Chromium: 12px (as defined by ::-webkit-scrollbar { width: 12px; height: 12px; })

In addition, for Firefox 89.0.2 (64-bit) (current stable version) on Windows:

• without scrollbar-width: thin;: 17px
• with scrollbar-width: thin;: 8px

[elhananjair]

In addition to the thickness of the scrollbar I think on "Click" and "Hover" state, It would be best if the color intensity of the background be increased to view the scroll bar well enough.

[juliushaertl]

@jancborchardt I'd actually vote for just using the default browser size for the scrollbar to have it more discoverable and fit the default system preference there. Any thoughts?

[elhananjair]

@jancborchardt I'd actually vote for just using the default browser size for the scrollbar to have it more discoverable and fit the default system preference there. Any thoughts?

yeah but changing the color of the scroll bar is also nice...

[ghost]

This issue has been automatically marked as stale because it has not had recent activity and seems to be missing some essential information. It will be closed if no further activity occurs. Thank you for your contributions.

[elhananjair]

If this issue got closed does that implies like the issue is fixed? If that is the case closing this issue is not good idea I think.

[shavs]

@elhananjair I don't think the issue is being closed - it's just an automated response from the bot for issues that haven't been commented on in a while.

I'm assuming that the label 1. to develop means it's added to a development pool of issues, just so it's not forgotten or closed

[rexxmagnus]

My partner also has this issue with the scroll bar. I think it should fit with the default browser behaviour for Firefox and any specific colouration changes applied in the override css in the themes section. For the moment, I've had to override the thin setting, because my partner finds it really difficult to select the scrollbar (he has no scroll wheel and dragging scrollbars is his preferred method of scrolling).

[elhananjair]

@juliushaertl is there any discussions among the developers about this issue?

[derbenx]

For those still reading this is 2023.. as it comes up in a search. I can't stand itty bitty scroll bars either. Try this out, if anyone is having issues.

https://github.com/derbenx/nextcloud-normalscrollbars/

[Cwpute]

I'm having the same problem currently, both regarding scroll bar width and colour.

Especially since the last update which added round corners, which makes the scroll bar partly disapear when it's at the top or bottom of the list, because it goes behind the curved borders... i don't know about you but to me, i perceive partly hidden buttons as either uninteractible, or part of the "decor" but not as actual tools i can use.

More importantly, and i've encountered this issue several times with people not familiar with the Nextcloud interface: to my knowledge, nothing currently clearly tells you if there is more files down the list or not. Some apps use a white fade-in to visually tell the list isn't over yet, some use a distinguishable coloured line at the the bottom and top of that list, some use a Jump to bottom/top button when you're in the middle of the document... and some simply use the position of a well visible, clearly defined and positioned scrollbar on the side.
Without any of these tells, i've seen friends and aquaintences -- as well as myself after long tiring days -- being lost or confused as to why the file we were searching for wasn't there. Spoiler: it was just a scroll away from our eyes.

This might seem like nothing, but to me a "clean" interface needs to be efficient before "looking" efficient.

[provokateurin]

@Cwpute I can second your observations, I also noticed many people not knowing that the can scroll down in the files list because the scrollbar is basically invisible.

@nimishavijay @jancborchardt can this be prioritized? The problem is very annoying and it shouldn't be too hard to make the scrollbar a bit more visible and even bring it into a usable state.

[nimishavijay]

Browser default sounds good to me as well!

Another related problem that I can see is the scrollbar being situated at the right edge of the body container and not on the right edge of the screen as it is for most other websites. So when we want to drag the scrollbar, intuitively we move our mouse to the right edge of the screen, and it doesn't work because scrolling does not work outside the body container.

Not sure about the technical feasibility, but I would suggest to display the scrollbar on the right edge of the screen all the time, like in Github or any other website. The content that scrolls would just be the content inside the body container, but the scrollbar is in a more expected position. What do you think? @nextcloud/designers any thoughts here?

[Ornanovitch]

Is this as simple as this?

-  	scrollbar-width: thin; 

in

server/core/css/styles.scss

Lines 9 to 20 in 02dc1bc

	html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section, main {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
	cursor: default;
	scrollbar-color: var(--color-border-dark) transparent;
	scrollbar-width: thin;
	}

[Ornanovitch]

I'd like to suggest to also remove the scrollbar-color, which is barely visible... :/

[jancborchardt]

@Ornanovitch yes, seems like removing both would do the trick. Can you submit a pull request? :)

[Ornanovitch]

@Ornanovitch yes, seems like removing both would do the trick. Can you submit a pull request? :)

done :)

[provokateurin]

Thank you so much, this has been bugging me for such a long time!

[elhananjair]

Thank you guys