5 ms·

What about when a native scroll bar looks completely off compared to the the theme of the rest of the page?

burnte 3y ago
Function over form. If fancy scrollbars make it harder to use, then they should be gone. Design should never trump utility.
- circuit10 3y ago
  https://user-images.githubusercontent.com/13787163/161954436-6116cc6d-7c6d-446f-b3a3-febc9801e178.png https://user-images.githubusercontent.com/13787163/161954436... Wouldn’t this look completely off with a massive light mode default Chromium scroll bar in the middle of everything? When I was developing that my main goal was to get the UI looking consistent and clean so it would feel good to use, which I think is an underappreciated thing; if your UI doesn’t “feel right” then people won’t enjoy using it no matter how functional it is To be fair it probably does have contrast issues which I could improve Note: it’s an Electron app so maybe that’s different
  - madeofpalk 3y ago
    Use CSS color-scheme: dark to indicate that system widgets, such as scroll bars, should be dark https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme https://developer.mozilla.org/en-US/docs/Web/CSS/color-schem...
    - graup 3y ago
      TIL. This actually solves my main need for custom scrollbars. Now the only remaining use case is when designers don't design components around default scrollbars. Sometimes the default one just looks too big compared to the size of the component. But this can be solved with design (don't cram stuff into small fixed boxes that then need to be scrollable).
    - circuit10 3y ago
      That would help, it wouldn’t look quite right though. What’s the difference between styling a scroll bar and, say, a button in an application like this? If you want everything to look how the user prefers and fit into the OS then you shouldn’t really style anything at all
  - kps 3y ago
    > Wouldn’t this look completely off with a massive light mode default Chromium scroll bar in the middle of everything? Yes, which is why that design is wrong. Respect @media(prefers-color-scheme). Forcing a light or dark background causes readability issues for some people.
okanat 3y ago
Think like this: They have never been a part of the theme of the page. Just like the user's magenta tabbar
- circuit10 3y ago
  It’s an Electron app in my case so there’s no browser chrome for it to fit into, and the scroll bar is also in the middle of dark-themed content: https://user-images.githubusercontent.com/13787163/161954436-6116cc6d-7c6d-446f-b3a3-febc9801e178.png https://user-images.githubusercontent.com/13787163/161954436...
  - okanat 3y ago
    Since Electron can be considered the browser chrome itself, the developer can access to its lower level API to customize those things. You can also set the dark mode in CSS.
    - circuit10 3y ago
      Why is that better than using CSS to theme the scrollbars as I’m doing now?
Gualdrapo 3y ago
The thing is that the looks of scrollbars vary so much between platforms - on mobile you can barely see them only when you do the action of scrolling! So it would be rather weird that, if you are seeing a website in mobile and you just put a scrollbar because reasons, you're quitting some horizontal/vertical space to the effective area of the website. And note that the act of scrolling is much more related to the OS host rather than something the website itself should provide (now, if there was an standard way across every device to scroll to the very top or the very bottom of a view (webpage, list, etcetera...). I am a designer myself but I agree than we should not mess with them. And the plus that it's a bit less of work for us (and devs, when they have to implement those things).
- circuit10 3y ago
  It’s an Electron app for me so it’s only going to be on Chromium on desktop But if scroll bars can be themed with CSS now, that should still give the browser control over things like whether they take up space or not and the actual scrolling behaviour, right? It would just allow the developer to give some styling hints so it doesn’t look completely disconnected from the rest of the page
  - Karellen 3y ago
    But it will look disconnected from every other app on the user's system. Whatever style the user currently has installed on their system, if the scrollbars on your app look the same as all the other scrollbars they ever use, they'll recognise them instantly and know how to use them instantly, with zero additional cognitive load. You users might be using enough of their brain to figure out your app (maybe because they're also being partially distracted by their boss/child/phone/pet/music) already, don't make them spend time thinking about your gorram scrollbar as well.
    - circuit10 3y ago
      I’m not really going for a native OS theme, if I wanted that then I’d probably have to use a native GUI toolkit
wpm 3y ago
You'll live.
jabroni_salad 3y ago
This is actually why I have been resisting the new tweetdeck experience. (That and the activity feature being removed). The scrollbars are so bad on Windows. The screenshots I have seen from mac look nice enough, but windows scrollbars were never meant to be in the middle of the webpage 6 times.

Function over form. If fancy scrollbars make it harder to use, then they should be gone. Design should never trump utility.

circuit10 3y ago
https://user-images.githubusercontent.com/13787163/161954436-6116cc6d-7c6d-446f-b3a3-febc9801e178.png https://user-images.githubusercontent.com/13787163/161954436... Wouldn’t this look completely off with a massive light mode default Chromium scroll bar in the middle of everything? When I was developing that my main goal was to get the UI looking consistent and clean so it would feel good to use, which I think is an underappreciated thing; if your UI doesn’t “feel right” then people won’t enjoy using it no matter how functional it is To be fair it probably does have contrast issues which I could improve Note: it’s an Electron app so maybe that’s different
- madeofpalk 3y ago
  Use CSS color-scheme: dark to indicate that system widgets, such as scroll bars, should be dark https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme https://developer.mozilla.org/en-US/docs/Web/CSS/color-schem...
  - graup 3y ago
    TIL. This actually solves my main need for custom scrollbars. Now the only remaining use case is when designers don't design components around default scrollbars. Sometimes the default one just looks too big compared to the size of the component. But this can be solved with design (don't cram stuff into small fixed boxes that then need to be scrollable).
  - circuit10 3y ago
    That would help, it wouldn’t look quite right though. What’s the difference between styling a scroll bar and, say, a button in an application like this? If you want everything to look how the user prefers and fit into the OS then you shouldn’t really style anything at all
- kps 3y ago
  > Wouldn’t this look completely off with a massive light mode default Chromium scroll bar in the middle of everything? Yes, which is why that design is wrong. Respect @media(prefers-color-scheme). Forcing a light or dark background causes readability issues for some people.

okanat 3y ago

Think like this: They have never been a part of the theme of the page. Just like the user's magenta tabbar

circuit10 3y ago
It’s an Electron app in my case so there’s no browser chrome for it to fit into, and the scroll bar is also in the middle of dark-themed content: https://user-images.githubusercontent.com/13787163/161954436-6116cc6d-7c6d-446f-b3a3-febc9801e178.png https://user-images.githubusercontent.com/13787163/161954436...
- okanat 3y ago
  Since Electron can be considered the browser chrome itself, the developer can access to its lower level API to customize those things. You can also set the dark mode in CSS.
  - circuit10 3y ago
    Why is that better than using CSS to theme the scrollbars as I’m doing now?

Gualdrapo 3y ago

The thing is that the looks of scrollbars vary so much between platforms - on mobile you can barely see them only when you do the action of scrolling! So it would be rather weird that, if you are seeing a website in mobile and you just put a scrollbar because reasons, you're quitting some horizontal/vertical space to the effective area of the website. And note that the act of scrolling is much more related to the OS host rather than something the website itself should provide (now, if there was an standard way across every device to scroll to the very top or the very bottom of a view (webpage, list, etcetera...). I am a designer myself but I agree than we should not mess with them. And the plus that it's a bit less of work for us (and devs, when they have to implement those things).

circuit10 3y ago
It’s an Electron app for me so it’s only going to be on Chromium on desktop But if scroll bars can be themed with CSS now, that should still give the browser control over things like whether they take up space or not and the actual scrolling behaviour, right? It would just allow the developer to give some styling hints so it doesn’t look completely disconnected from the rest of the page
- Karellen 3y ago
  But it will look disconnected from every other app on the user's system. Whatever style the user currently has installed on their system, if the scrollbars on your app look the same as all the other scrollbars they ever use, they'll recognise them instantly and know how to use them instantly, with zero additional cognitive load. You users might be using enough of their brain to figure out your app (maybe because they're also being partially distracted by their boss/child/phone/pet/music) already, don't make them spend time thinking about your gorram scrollbar as well.
  - circuit10 3y ago
    I’m not really going for a native OS theme, if I wanted that then I’d probably have to use a native GUI toolkit

wpm 3y ago

You'll live.

jabroni_salad 3y ago

This is actually why I have been resisting the new tweetdeck experience. (That and the activity feature being removed). The scrollbars are so bad on Windows. The screenshots I have seen from mac look nice enough, but windows scrollbars were never meant to be in the middle of the webpage 6 times.