16 ms·

Don't use custom CSS scrollbars

382 points by Twixes 3y ago

Minor49er 3y ago
On the contrary, we should be encouraging people to customize scrollbars so that scrolling is taken into consideration again. It can help get rid of trends like invisible/hidden scrollbars or those useless horizontal progress bars that shows how far into a page you've read
- kypro 3y ago
  There's been an ongoing trend in UI design in recent years to assume more and more of the user. The removal of scrollbars from browsers confused my parents. Instead of having up and down arrows by your content now you're just expected to just know that you scroll with your mouse / trackpad. Similarly, modern versions of Windows will just assume you know that the four squares at the bottom of your screen is where you need to click to start using your computer, and Mac will just assume you know the red dot closes the current window. These patterns probably seem obvious to us as power users, but I find average users get endlessly confused by them. And it's not just elderly people who get tripped up by this. I've seen kids who have primarily used phones and tablets growing up get confused when they first use a desktop computer because they haven't yet learnt all the required prerequisite UI patterns. Even as a power user if you switch from Windows to Mac (or vice versa) it often takes some time just figure out all of the completely unintuitive modern UI because the UI designer is lazily assuming you already know how to do everything... Just yesterday my girlfriend (who uses her computer almost every day) asked me for help replying to an email in outlook on her laptop. Confused I asked, "what do you mean you need help replying to an email?". Well, she was confused because she doesn't use outlook much and didn't know she needed to click the small curved arrow icon to reply to an email. For the last 5 minutes she had been stupidly looking for a button that said "reply". While I completely agree with your sentiment about scroll bars, I feel like this a much bigger issue and one that web developers shouldn't be required to fix. The core issue here is that your OS / browser shouldn't be hiding your scrollbar to begin with... This isn't something web developers should be addressing, but the UI designers who think it's preferable for me to have a browser URL bar that is 80% of my screen width at the expense of the word "back" on my back button.
  - abhibeckert 3y ago
    > These patterns probably seem obvious to us as power users, but I find average users get endlessly confused by them. They're obvious to power users because we have seen them a million times before. When a web developer does a custom scroll bar that is when "average" users get confused, because suddenly they're presented with something they haven't seen. It's not too much to expect a user to know how scrolling works by default in their client operating system/browser. It _is_ asking too much to expect users to know how scrolling works when you customise how it works. Web developers should not be touching this stuff.
  - WWLink 3y ago
    > And it's not just elderly people who get tripped up by this. I've seen kids who have primarily used phones and tablets growing up get confused when they first use a desktop computer It goes the other way as well lol. There's lots of ridiculous random gestures for android/iOS
  - Pathogen-David 3y ago
    In general it feels like a lot of UI design these days is optimizing for looking pretty in screenshots and photos rather than being useful as a tool, it's honestly gotten really frustrating in recent years.
    - moritz 3y ago
      A month or so ago, a screenshot of Snow-Leopad-era OS X standard UI controls made the rounds on the fediverse. One forgets so fast with incremental change, but when you take it in with some distance, it’s truly devastating how things have regressed since that time. The Apple folk and adjacent circles like to throw around how “design is how it works™”, but design hasn’t been how it works in Macos for a while (and it’s not better anywhere else).
andersrs 3y ago
The worst pattern I've seen is setting the page height to the viewport height and then placing scrollbars on containers. For example this particular UI library has managed to break print layout and page navigation keys and mouse scrolling until you focus the content div https://www.skeleton.dev/docs/get-started https://www.skeleton.dev/docs/get-started I was once guilty of doing this on a site I made but the users called it out so I fixed it. It's another thing for a UI library to spread this pattern.
- yonixw 3y ago
  Oh the pain of printing any modern news site with their fixed headers and popping ads. You just select the text and "R-CLK->Print selected" praying that at least the content is just a list of paragraphs (<p>) and nothing more...
  - pessimizer 3y ago
    I usually go into the inspector, find the element that contains the story and "screenshot node." Or I go the opposite way and "block elements" with ublock until I get a reasonable page, then delete all of those rules after I print. Unless they have a print stylesheet, of course. People still do those.
  - andersrs 3y ago
    Fixed headers and popups that are not a problem per se but it's bad implementations that cause the problems. It's possible to use a print stylesheet to hide certain elements and set the background to white.
- deleted 3y ago
  [deleted]
- luisgvv 3y ago
  Saw this once, it was a nightmare to maintain the page once it got out of control
circuit10 3y ago
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).
      - 3y ago
willio58 3y ago
On pages, I fully agree. Within components, I also agree but I've found it hard to push back when a design calls for scrollbars because the alternative is... what? It can be difficult to visually say "Hey, you! There's more to see if you scroll down in this area" You can try to use gradients with fade-outs, you can try to make it so the top of the last item in a scroll area is just visible enough to make it clear something can be scrolled into view. I've also seen actual text-based messages at the bottom of scroll areas to let users know. But at that point, is it really better than creating your own little scroll bar? Really I think we just need better APIs from the browsers to customize when a scroll bar is shown (again, not on the page level but within scrollable elements), and what it looks like. This has already gotten much better over the years but there are still some features that would be great to have in this area. One thing I will say is I really dislike the smooth-scrolling behavior that some sites build in with JS. It's usually broken on macs that already have smooth scrolling and it's just a dumb thing to add.
- Sohcahtoa82 3y ago
  > One thing I will say is I really dislike the smooth-scrolling behavior that some sites build in with JS. It's usually broken on macs that already have smooth scrolling and it's just a dumb thing to add. I'm fairly sure every platform uses smooth scrolling by default, and so I'm absolutely and utterly baffled as to why web devs think they need to implement it in JavaScript. If you're on a platform without it, or you've explicitly disabled it, there's probably a good reason for it, so re-adding it with JavaScript is taking away agency from the user.
- munk-a 3y ago
  > Within components, I also agree but I've found it hard to push back when a design calls for scrollbars because the alternative is... what? Accessibility. Mention that blind users will be unable to utilize the site without a lot of additional work and you can usually kill it dead. Custom scrollbars are such a niche thing that usually nobody is married to the idea - I've found it quite easy in the past to kill off those sorts of weird quirks in design with just that word... If you still have issues mention that mobile browsers often do a lot of customization around bounce scrolling and the like. Building this design choice out now likely means that whenever Apple releases a new phone it's quite possible that your site look antiquated and requires some major reworks.
okanat 3y ago
I wonder if there is a way to override the entire web with a custom stylesheet plugin like Stylus for Firefox.
- henriquez 3y ago
  You could use Gemini as an alternative to HTTP / HTTPS. No weird surprises in a text-based browserspace.
  - okanat 3y ago
    This is a non-answer though. Most of the web is in HTTP nobody can change that.
pvinis 3y ago
this post could have been way less that a million lines long. maybe if it had a nice colored scrollbar it would be more pleasant to read. kidding aside, it is longer that it could be, to get the point across. maybe the browser just needs a similar setting to the macos and windows one, to never use css on scrollbar, and we're good?
_madmax_ 3y ago
I'll use whatever the hell I want, lol.
preommr 3y ago
> Don't use custom CSS scrollbars Alright, I guess I'll go back to using js scrollbars instead /s I hate articles like this because they present highly opinionated solutions as something definite even though it has a narrow focus on what the author cares about. Web apps can be incredibly powerful and convenient, sometimes a scrollbar is in the middle of the page like with that codepen. In those situations, being able to style and control the width of the scrollbar is useful. How about we hold developers accountable for their work instead of trying to ruin it for the rest of us because a minority do something badly.
- abhibeckert 3y ago
  > being able to style and control the width of the scrollbar is useful No it's not. I have operating system wide settings for how scroll bars should work and the rules are complex with visibility and size of the scroll bar changing from one second to the next. I expect my scroll bar settings to apply to all websites and they are significantly better than what codepen does. Codepen also doesn't allow me to scroll past the beginning/end of the file, which feels jarring and just wrong with a touch scroll device. And I'd bet it also falls apart with assistive technology for people who can't physically operate a mouse or trackpad, which in most countries is illegal. Why open yourself up to those issues?
  - fbrchps 3y ago
    > highly opinionated solutions as something definite even though it has a narrow focus on what the author cares about Most users either don't have such strong opinions about their scroll bars, or would prefer it looks coherent with the application, or OS-native (your preference). But I can almost guarantee the larger group of non-technical users will have never thought about the styling of their scrollbars for more than a few seconds. Also in terms of accessibility, so long as they're doing CSS-only changes, and the bar is sized compliant and has proper focus states, assistive technology won't care.
    - pessimizer 3y ago
      They won't care as long as it's consistent. The only way for it to be consistent is for people not to touch it.
bbrks 3y ago
One of my very first blog posts[1], which took off at the time on HN[2] was on this topic - in reaction to the trend of "horizontal page progress bars" (a.k.a. scroll bars!) What's old is new again... and again... and again... :) [1] https://bbrks.me/reinventing-scrollbars/ https://bbrks.me/reinventing-scrollbars/ [2] https://news.ycombinator.com/item?id=6246777 https://news.ycombinator.com/item?id=6246777
karaterobot 3y ago
> Scrollbars are part of the area of the browser that is outside your scope of concern. No, they're actually in my scope of concern, that is the whole point of your article. The reason they were brought into my scope of concern is that a lot of people had a use case for styling custom scrollbars. I have a use case for it myself. If you're saying "don't abuse your ability as a developer and make inacessible websites" then yeah, okay. But taking options away from people because they might theoretically make bad moves with them is not a good strategy. If you took away every CSS attribute I could use to make inaccessible websites, we wouldn't have anything left. You'd be surprised what I can mess up. Better to teach people how to do it right and why.
- kelnos 3y ago
  Taking all the flexibility away would be fantastic. I wish all webapps looked as close as possible to native apps, and couldn't style things like buttons.
  - barneygale 3y ago
    Shoo. You're ruining the web!
  - Drew_ 3y ago
    Safari, Edge and Chrome don't style any HTML elements like their native counter parts.
    - layer8 3y ago
      Which is part of what is being criticized. Say about Internet Explorer what you will, but it used native controls.
  - sapling-ginger 3y ago
    > looked as close as possible to native apps This is a meaningless statement, because even native apps don't "look like" native apps. No operating system has a universal style across all native apps, and some (Windows) aren't even internally consistent with the OS's apps.
RobotToaster 3y ago
Does firefox ignore this? The codepen example doesn't seem to work for me.
rektide 3y ago
There was a quick starburst trend around 2010 where super-fancy css componentry was being heavily explored & all sorts of interesting but not necessarily better stuff was being done, with radical redesigns. My mini-project submission for a job I got was using a super melted Geiger esque up-down button set. I've tried to go back & find evidence of this era, to find more examples of these heavily glitzed up components. And wow, so much of this has disappeared entirely off the net. Maybe I'm lacking the right keywords. But this feels like a mega flash in the pan that came & went super fast.
- meindnoch 3y ago
  Like this? https://pbs.twimg.com/media/Fb5HJBFWQAIH09w.jpg https://pbs.twimg.com/media/Fb5HJBFWQAIH09w.jpg
kibwen 3y ago
On the contrary, I'm completely in favor of custom CSS scrollbars because it's unimaginable that websites could do worse than modern OSes already do when it comes to scrollbars. If anyone here has a time machine, immediately after you've finished killing Hitler may I recommend that you gently persuade Jony Ive away from the terrible decision to make scrollbars hidden, low contrast, and impossibly thin.
- the_other 3y ago
  Personally, I like the Apple ones. I’m partially sighted, so I should probably want the stronger visual design, but I don’t. What I prefer is consistency with the OS. My OS is my main tool for interacting with the digital realm. My life would be easier if the conventions were more evenly applied. Custom scrollbars concern me that my OS defaults are being overriden: will the field scroll at the expected speed; can I flick it and catch it as I’m used to; is the scale expressive of content size? Custom scrollbars tell me that the developer doesn’t care about me, they care more about their brand manager and their pay check. This suggests the product they represent wont suit me. Along with intrusive pop-ups, subscription overlays, and “we value your privacy”, it’s a clear sign I should not engage with that provder.
zokier 3y ago
How many of the arguments apply to any CSS styling?
- minebreaker 3y ago
  Isn't that why so many people love Firefox's reader mode?
- defanor 3y ago
  Indeed, I was just about to comment on the linked page overstyling fonts and colors while suggesting to avoid overstyling other elements. The title can be clipped to "Don't use custom CSS" while reusing the same justifications.
Aeolun 3y ago
> You might be scoffing at the kilobytes this removal represents, but when it comes to web performance, every little bit counts I read this, and I get a very good idea of what the rest of the post will contain.
- chrsjxn 3y ago
  The awesome thing is that this comes right after an example that uses about 200 characters... I know we love to talk about optimizing web contents, but a single selector and a few hundred bytes (before minification and compression...) is not significant
adamredwoods 3y ago
>> Apple learned the lesson about visible scrollbars the hard way when it introduced its ultra-minimal, disappearing scrollbar indicators. >> There’s no visual indication that there’s more content present in this window—the only way to discover it is to scroll downwards. However, without an affordance to indicate the presence of additional offscreen content, the chances are low that someone will bother to check. I appreciate the callout that Apple is an infringer on removing the scrollbars, which is a bad UI practice. For the entire lifespan of the web, overflow content indicators have been (aka scrollbars), for better or worse, an inherent function of the browser.
- em_te 3y ago
  Moreover, Google said they did a study when they first released their minimalist homepage design and when people saw lots of white space below the search bar, they assumed the page wasn't finished loading yet and more content was to come. People were accustomed to long pages like Yahoo's homepage with lots of content below the search bar. They solved it by adding a footer section with typical copyright text and people understood that the page was finished loading.
robomc 3y ago
What would be nice would be some sort of solemn undertaking that the presence or absence of a browser scrollbar will never alter the placement of the content.
- leeoniya 3y ago
  https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-g...
jmbwell 3y ago
I recognize that web developers want full control over the user experience, usually to the point of reimplementing all of the native UI widgets provided by the user’s OS. As a user, I prefer for my OS to do things my OS does, including styling my widgets. My scrollbars, my scrolling behavior, window chrome, all of it… whether it’s good or bad or right or wrong, that’s between me and my OS. As a user, I hate when web apps mess with scrolling. It breaks affordances I use, like tapping at the top of the screen to jump to the top of the page, or home/end keys on desktop. It is inevitably a worse experience than native scrolling, no matter how hard you try. Facebook mobile web for example is basically unusable right now because it’s trying to overthink scrolling. If Facebook can’t get it right, I’m not sure what makes anyone else think they can. And why would anyone want to? Honestly! Microsoft and Apple have already done all that work. As for scroll bars and other widgets, again, right or wrong, that’s not for some web site to mess with. Sorry if the developer doesn’t like the way it looks… they only have to deal with it while working on it. As a user, I am stuck with the developer’s choices, even if they override my own choices, which I’ve made in my OS, which is where those choices belong. If you’re going to clobber native experience, I would argue, don’t do it unless there is absolutely no other option. Corollary: there is always another option.
- eviks 3y ago
  Facebook isn't known for great design, so the fact they can't get it right tells us very little Similarly with the MS/Apple - if they had already done all the work, they would allow you to force your scrollbar choice > Corollary: there is always another option What's your other option to only show wide scrollbar in large documents since these are the only ones I actually need scrollbar in?
- grishka 3y ago
  YouTube's custom scrollbars that take actual space on screen at all times annoyed me so much that I made a userscript that got rid of them. I made the choice to use overlay scrollbars, and I will enforce it if needed.
  - Buildstarted 3y ago
gatkinso 3y ago
I feel the same way about scroll-jacking and smooth scroll.
Sujeto 3y ago
I have an application that looks terrible if I don't make the scrollbar transparent. I thought this was going to be about not using those horrible javascript scrollbar libraries, which make the code a lot more complex (I tried them all).
- inetknght 3y ago
  > I have an application that looks terrible if I don't make the scrollbar transparent. You have an application that works terrible if you make the scrollbar transparent. Transparent scrollbars are not intuitive.
  - Sujeto 3y ago
    There's a chat on the left side, right side shows media. If I allow scrollbars to render normally the whole site is split in 2, in the middle being a scrollbar, which looks bad especially if not overlay. I've considered not caring about it and just let the scrollbar, but it bothers me. It's my application anyway, the browser is not just a document reader anymore, it's an application framework (as well).
    - inetknght 3y ago
      > If I allow scrollbars to render normally the whole site is split in 2, in the middle being a scrollbar, which looks bad especially if not overlay Well that's your opinion. But I would rather see a scrollbar in the middle to show me that I can actually scroll something. Otherwise it's a hidden feature and hidden features are not features, they're bugs.
WirelessGigabit 3y ago
Also don't use buttons that don't show me the link I'm navigating to. If you must have a different style, style them around an `a href`, not a `button`. And actions should be buttons, not links. I'm looking at all of those cookie websites with a 'link' that says 'Confirm choices' and a button that says 'Allow all'. Instinctively we go to the button, not the link. Weirdly enough I responded on the Image send to Microsoft via MS Edge article about how even Microsoft, the writer of LOTS of documentation on how to make good UIs, abuses all these things. Now, of course we could argue about how these things just visuals, but that's not completely true. Lots of screen readers depend on the semantics of the document structure to actually identify objects correctly. Button? Action, edit, sign up, delete, .... Something that actually changes something. Link: navigation...
- agos 3y ago
  aria roles solve that problem easily for screen readers, so you can use buttons for navigation and text links for actions without big issues
  - polydevil 3y ago
    No, they don't. Aria roles are not for making one tag to work like another. (Otherwise what is the point of having different tags with different semantics?). Aria is for making inaccessible html more accessible. Links can not be disabled (buttons can) - so they dont rely on js to work; Buttons rely on js (except for submitting the form). There is no way to interchange one with another without sacrificing usability.
Waterluvian 3y ago
Scrollbars are frustrating to handle. Getting their actual size if you need to do stuff like compensate for a virtual table is really tedious. And Macs do them entirely different from everyone else, so that’s not nice either.
graycat 3y ago
Several billion people understand and make good use of the standard HTML scroll bars. For any change, on the first day, only the programmer understands the new scroll bars. For an Internet user who each month or so goes to dozens, maybe hundreds, of Web sites, all the new scroll bars are something new to learn likely particular to that site. So, for that user, a significant part of the Internet becomes dozens or even hundreds of times harder to use. Same for standard HTML push buttons, links, check boxes, radio buttons, multi-line text boxes, single line text boxes (and the ones for passwords), etc. Changes make the site obscure and significantly more work to use. Web site owners: When I see a Web page with an obscure user interface, commonly I just do a single left click on the X in the upper right corner of the Web browser instance displaying that page. Beyond an obscure user interface, often I can conclude that the Web site does not want me to see the content on their Web pages because they cover up the content with pop-up windows or expand and contract some header material at the top of the page, material that wastes limited vertical space on my screen. Another problem is Web pages that follow my mouse pointer and respond to its position without my giving a click. Big interruption in using the site. Nearly always I'm just trying to bring the window to the top of the Z-order so, instead, have to swat like a dozen flying insects the various responses to the mouse click -- again, I do want to see the page and just want to bring it to the top of the Z-order. Then there is Web site code making the window larger -- again it's like swatting flying insects. No, no, 1000 times no, with rare exceptions, I do NOT want any one page to hog my screen area. The reason is fundamental: In visiting the page, I'm trying to get something DONE, and that requires seeing at least two windows, maybe a few more than two. When one program takes up all or too much of the screen area, I can't see the other windows I need and, thus, can't get the work done. There is an old remark that goes something like "Just because you could doesn't mean you should."-
- denton-scratch 3y ago
  > Same for standard HTML push buttons, links, check boxes Interesting that you mention checkboxes. For a long time native checkboxes on Linux (distro?) would come up impossibly tiny if you had a decent-sized screen. They were hard to hit accurately with a mouse, and impossible with a trackpad. That seems to have been cured now, but I don't know when it was fixed.
gwern 3y ago
> When you style things on the web, you get control over almost the entire experience. From ten thousand feet up, your scope of concern is this: The mockup scrollbar looks nothing like scrollbars are now. > Do you need to make someone download that extra data? > > Spoilers: you don’t. Scrollbars work without CSS. No, they don't, because web browsers have been busy removing scrollbars as much as possible. As I type this, there is no scrollbar on my screen because Firefox no longer does that. For a moment, I thought maybe FF still showed at least 1 pixel of the scrollbar, but I scraped it off with my fingernail and it turned out to be a cat hair. The scrollbar appears only for like a second before 'helpfully' fading out, and is a few pixels wide (on a 4k portrait monitor where I'm not exactly hurting for space). Chromium still has a semi-reasonable scrollbar, but I can't vouch for the official Google Chrome. Safari and Mac OS/iOS have, of course, been years ahead of everyone else in the wonderful pro-user innovation of 'hiding scrollbars and making them a pixel wide if absolutely forced to display one'. > ...This is why Apple introduced a preference to always show scroll bars...Windows followed this path blazed by Apple Yes, a preference to go back to the old standard behavior, which in designer-speak means "we done f-ked up, but we hate real users and love the sleek minimalist appearance https://asktog.com/atc/the-third-user/ https://asktog.com/atc/the-third-user/ more, so this is our way to get our users to shut up". And 'blazed', in this case, is 'lit on fire many decades of hard-earned UI experience'. > As an aside, I set the operating systems I use to always show scroll bars. Which is why you should support custom CSS scollbars to negate browsers & OSes hiding them.
- chrismorgan 3y ago
  > As I type this, there is no scrollbar on my screen because Firefox no longer does that. If you’re using Linux: blame GNOME for this; in GTK 3 and 4, they actively removed your ability to get non-overlay scrollbars without each individual app manually supporting the concept. So there’s no global switch or anything like on macOS or Windows. Firefox has a setting “Always show scrollbars”, but precious little other GTK software will support non-overlay scrollbars in any way.
  - gwern 3y ago
    The problem is, there are so many to blame. It's not just GNOME: it's Microsoft, and Apple, and GNOME, and... It can't be fixed by just one entity refusing to go with the flow; the flow is the problem. As long as there seems to be some sort of invisible consensus by designers worldwide that Scollbars Are Bad, the problem will spread and infiltrate systems, even ones which ostensibly default to scrollbars. ('A setting' is also not a fix but a copout as I already pointed out - you know >99% of users will never change it, especially on mobile. Whether open source or closed, maintainers are always the same when it comes to taking the hard path of fixing something's design or the easy path of saying 'you can set an option, CLOSED'.)
codeptualize 3y ago
I agree with many points but there is definitely a need for custom scrollbars. The reality is that if you have scrolling in the page (like a column layout for example), you kinda have to customize the scrollbars. If only to not break your layout as scrollbars are completely different everywhere, hidden, different widths, some ugly, some nice, no reliable way to detect the situation, it's a mess. I would opt for more options: give us better tools to style (around) scrollbars, give us the tools to honor what the user prefers, to know when and when not to blend it in with the UI, to increase contrast, or to just leave it alone. Just not customizing is not a realistic solution for a lot of situations.
- lolinder 3y ago
  Your UI really shouldn't be so unresponsive that the width of an element's scroll bar throws off your design. As for the aesthetics of the scroll bar: it might look ugly to you, but that's what the user expects their scroll bar to look like! Designing well for web requires a bit of a paradigm shift compared to designing a print document or even a native app. You have to accept that you're going to be a guest in the user's browser, and that means you don't have control of everything. Failing to accept that just leads to frustration, but if you can embrace it and strive to be a good citizen of the user's browser, the resulting symbiosis can be beautiful in its own right!
  - deleted 3y ago
    [deleted]
  - codeptualize 3y ago
    > but that's what the user expects their scroll bar to look like! You base that on..? I’ve had users complain about their native scrollbars more than once. Native scrollbars can make things look very broken. In terms of responsiveness, true for a normal website, but sometimes impossible in more complex ui elements (like I said, not the page scroll, but in page scrollable elements) I would really like to see some research on this idea that people prefer native elements, it’s not what I see in user tests and the feedback I get. My experience is that people want a functioning app that doesn’t look broken. My whole point is: we should be able to provide a great experience that’s accessible and allows the user to give their preferences (like prefers reduced motion).
presentation 3y ago
One thing I didn’t expect was that for a large data table that allowed side scrolling, Windows users comfortable with Excel didn’t know that they could scroll side to side because the scroll bar fell below the fold. I ended up needing to measure the page to set the height of the table to make sure that the table wouldn’t be taller than the page. But what I really wanted was to sticky the scroll bar so that it was always visible, or to display it at the top of the table instead of the bottom. I want to style scroll bars for this, not to make them prettier.
- tsian2 3y ago
  I did make a scrollbar that appeared to stick to the bottom of the table. I used a div with the same width as the table, used a scroll event listener to update the tables actual scroll position and only had it appear when the user was currently over a table and that table overlapped the bottom of the viewport. It worked well in the sense that people would use it without thinking about it.
- derefr 3y ago
  That's not so much "styling the scroll bar"; that's "trying to tell the OS widget library's metrics-policy logic its business, because you know better than it does, because it's insufficiently smart." If you think about it, a "smarter" OS widget library would always "float" scrollbars at the edge of the visible part of the viewport that the overflowing surface occupies. No configurability needed — it's just always better. So why expose the ability to do that for certain scrollbars in CSS — rather than just making all scrollbars everywhere always do that?
  - presentation 3y ago
    That's cool and all, but until I have enough influence personally to dictate Microsoft's design, I don't really have a choice but to depend on web APIs to achieve the desired effect.
    - derefr 3y ago
      You can dictate GTK and Qt's design. Also, I think for Chrome at least, it draws scrollbars using its own widget library — built on top of Skia, I think? Not sure what the widget-library part itself is called. You could definitely contribute to that.
bee_rider 3y ago
Is it possible to configure Firefox to ignore custom scroll bars? I haven’t noticed many at all. IMO it is a dumb feature, but there’s no harm in having it in CSS for people who want it, as long as the rest of us can ignore it.
deleted 3y ago
[deleted]
nawgz 3y ago
I mean, I use custom scrollbars so my apps look the same on each OS. Do you propose that I should instead accept windows making horrible ugly things that take up more space rather than just showing a minimal scroll bar? Seems like a non issue to me. My users are much happier with the more minimalist scrolls I’ve implemented over windows stealing 30px per scrollbar
codedokode 3y ago
Modern disappearing scrollbars in Linux are an awful design: - as scrollbar in browser disappears, I cannot see the position on the page and whether it is scrollable at all - as scrollbar handle is very narrow, it is difficult to drag it You might ask, why drag the scrollbar handle? Well, when you have tens thousands of lines in the terminal, it will take a long time to scroll it using touchpad or mouse wheel.
- eviks 3y ago
  It's an awful design because it ignores one is the most important factors of scrolling - document length. But then having wide scroll bars in short documents where you'd never use them is also bad design
  - quickthrower2 3y ago
    It is good design to have "wide-enough-for-long-doc" scrollbars in short documents for principle of least surprise.
    - eviks 3y ago
      That's repeating the same mistake - trying to force one generic principle onto every situation. Opt-in can solve that - only users that don't get surprised by a lack of useless elements can remove them
      - quickthrower2 3y ago
        Not a mistake. At worse a tradeoff. Hiding a scroll bar when you go below some arbitrary document height that would classically warrant a scroll bar is just confusing. People who use a mouse to scroll will not know what to do and assume there is a bug. And sometimes you want scrollbar level control even on a short document. It is not forcing them to use the scrollbar: keyboard shortcuts and menu items should still work as well.
        3y ago
darepublic 3y ago
I like the site csstricks.com but a while back I was disappointed to see they were customizing their scrollbar. It seemed really tacky and unappealing
deleted 3y ago
[deleted]
chrismorgan 3y ago
> Modifying the scrollbar via CSS means the scrollbar will effectively disappear when a Forced Color mode theme is applied. Again, if you can’t see it, you won’t know it’s there. > Much like with Forced Colors Mode, custom CSS scrollbars will not honor the presence of an enabled Increased Contrast Mode. These both just sound like browser bugs. In those modes, of course the browser should be ignoring or further modifying scrollbar colour changes. MDN on scrollbar-color: “Note: @media (forced-colors: active) sets scrollbar-color to auto.” (However, I can’t find any spec citation for this, not in Media Queries Level 5 or CSS Scrollbars Styling Module Level 1.) —⁂— Here’s my take: • Don’t use scrollbar-color on the document area, but treat this outermost scrollbar as browser chrome. In the early days of scrollbar-color it helped to set a suitable color-scheme setting in order to reliably get light or dark scrollbars as appropriate, but I don’t think any browser really needs that any longer (though it’s still a good idea, especially for other controls). • It’s OK to use scrollbar-color on scroll areas within the document, so long as you maintain suitable contrast. Transparent tracks are a little risky, but at least acceptable in most inner scroll areas. • On scrollbar-width, there’s a reason the values are `auto | thin | none`. As the spec says <https://w3c.github.io/csswg-drafts/css-scrollbars/#scrollbar-width https://w3c.github.io/csswg-drafts/css-scrollbars/#scrollbar...>: “The primary purpose of this property is not to allow authors to chose a particular scrollbar aesthetic for their pages, but to let them indicate for certain small or cramped elements of their pages that a smaller scrollbar would be desirable.” If you have a scrolling sidebar, for example, `scrollbar-width: thin` is completely reasonable. Other than that, there’s nothing useful to touch. • Never use the older ::-webkit-scrollbar* pseudoelements (which are the only way to get things like 1px wide scrollbars, like the article speaks of). Their degree of control was a mistake <https://w3c.github.io/csswg-drafts/css-scrollbars/#out-of-scope https://w3c.github.io/csswg-drafts/css-scrollbars/#out-of-sc...>, and their implementation never got beyond half-baked anyway, so that touching them at all harms scrollbar accessibility on at least Windows with non-overlay scrollbars (you lose the arrows at the ends). • With all of these new scrollbar CSS properties, note how thoroughly they’re defined as hints. If certain accessibility modes make scrollbar tweaks break things, that’s very probably the browser’s fault. And it’s an unhappy situation when authors have to consider browser bugs (though it certainly does happen sometimes).
eviks 3y ago
> There’s no visual indication that there’s more content present in this window—the only way to discover it is to scroll downwards. However, without an affordance to indicate the presence of additional offscreen content, the chances are low that someone will bother to check. > This is why Apple introduced a preference to always show scroll bars. But the proper solution is to add the info/affordance in that specific instance instead of always wasting space even when you don't use the scroll bar. This would also allow you to have a more convenient wide scroll bar for when you actually need to use it (in very large documents/lists, though currently you can't setup your scroll bar to depend on that) And here is the main problem with the article - this general approach blocks would block all UI innovation until some browser/OS vendor implemented something poorly (of course, this doesn't mean your implementation will be better, but someone else's will be)
- pickingdinner 3y ago
  I was under the impression "scrollbar = more to see" has been somewhat of a standard for a while now. The Mac example is just one of those classic UI fails. The worst are the pages where the scroll wheel doesn't work, even when you can see the scrollbar just fine. I'm always baffled, since no simple page would have that problem. Clearly they developed it and didn't care for breaking it. In html I would sometimes force the scrollbar to always show to prevent layout stuttering. But otherwise, changing the color of the scrollbar to match the fg and bg colors of the page shouldn't be too big of a deal. And I wouldn't mind if some browser skins would change the default scrollbar colors to match, either. Scrollbars are already stylized across the web and across programs. Most users don't mind it. With options come the bad choices, which anyone can list on one page.
  - eviks 3y ago
    > "scrollbar = more to see" has been somewhat of a standard for a while now. That's not a great standard because it conflates conveying information with providing control. 001 px width is enough to convey isScrollable info, but makes it impossible to scroll 100 px width makes it easy to scroll, but is a waste of space to convey convey isScrollable info
deleted 3y ago
[deleted]
TobyTheDog123 3y ago
Not to be an asshole, but --- well, I guess I'll be an asshole. This is good, thoroughly-researched advice with just enough condescension that I walked away from it kinda wanting to style my own CSS scrollbars. Additionally, there's a comment on this post replying to someone with "You'll live" which really isn't helping the case presented in the article. I won't, I don't have a good reason to, but I had a nice nostalgia trip to w3schools: https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp https://www.w3schools.com/howto/howto_css_custom_scrollbar.a...
quickthrower2 3y ago
Too much fun to be had, Streisand: body { scrollbar-color: #f16d4f #cccccc; &::-webkit-scrollbar { width: 13rem; } &::-webkit-scrollbar-track { background: #000; } &::-webkit-scrollbar-thumb { background-image: url("https://picsum.photos/200/200"); background-repeat:none; height: 13rem; border-radius: 13rem; } }
nathias 3y ago
a website should be obvious to scroll without scrollbars
LinAGKar 3y ago
What's going on in that Finder video? >There’s no visual indication that there’s more content present in this window Not only that. There is a clear indicator that there isn't more content, since the last row isn't filled. Only, there is, but one of the rows has randomly been truncated for some reason?
sharkbird2 3y ago
I largely agree, but the one thing I have been wanting to do sometimes is too be able to put marks/indicators on the scrollbar of where important pieces of information is in the flow. A lot like chrome does when you use ctrl+f to search for a word.
LeonB 3y ago
The OS gets the scrollbar wrong so often that as a user and developer I’ve found I need to take care of it. It’s fine relying on the “platform” but the platforms are just criminal cartels holding users and apps hostage. Two specific examples, just on scroll bars. I’ve found the platform failing to support dark mode and failing to support mixed high DPI scenarios. Both of these failings result in poor accessibility and real pain for real users. As a lowly app developer I don’t have the resources to do it perfectly for my users. But the OS is failing badly enough that I end up having to do the work. It’s not out of vanity, which is the only reason TFA author can imagine.
- naillo 3y ago
  Making a custom scrollbar because it doesn't support dark mode is worse for accesibility overall. Your custom scrollbar likely won't work well with tools disabled used for scrolling that isn't the mouse.
  - LeonB 3y ago
    I am a user who uses accessibility tools and is stating that the operating system is failing in both the size and the tone of the scroll bar. Btw, trivialising dark mode is not cool. I have photosensitivity at times and when it’s bad the pain of items appearing bright coloured is excruciating. Just so you know. (Special shout out to platforms who flash a huge white rectangle before rendering the dark mode content. It’s like pins in each eye.) The confidence with which you state “is worse for accessibility overall” is just breath taking. Had you written “may be” instead of “is” and “in many circumstances” rather than “overall” - then I would understand that you were thinking about this. But no you’re claiming perfect knowledge of a situation that you are not inside and which I am inside. The operating system gets it very wrong in very many circumstances. I end up having to provide - configurable - alternatives to overcome some of the egregious mistakes. If the operating systems start to get it right- awesome I can make the overrides opt in not opt out.
al_be_back 3y ago
the OP mentioned apple's headaches with the "disappearing" scrollbar, yes I often experienced that in Apple's own site, iTunes Connect (manage App submissions, rejections/comments etc). Disappearing scrollbars on TextArea with large amounts of text made is very easy to miss whole paragraphs of text, can be very costly. I'm for "Customizing the UI", as long as it helps the User get the most out of the site.
weird-eye-issue 3y ago
What about when you have scrollbars inside the "scope of concern" the author pointed out.. The sweeping statement in the title doesn't feel fully thought out even after the author ranted for over 3,000 words
dahwolf 3y ago
Another fun one is scroll-triggered animations, as one would commonly find on an Apple product detail page, as just an example. The problem is that it assumes smooth scrolling input, typically a touchpad or a touch-only device. The experience completely breaks down into wild stuttering when scrolling with friction: mouse-wheel that scrolls with discrete steps or the classic "drag the scollbar" interaction. Even when using smooth scrolling input it sucks, as you carefully need to time/verify your scroll speed as content appears/disappears based on force applied.
MrPatan 3y ago
Custom scrollbars, as in "I'll hijack the scroll events and draw custom stuff on the side of the element" kind of custom, yeah, that's bad and buggy and annoying. Being able to style native scrollbars is a godsend which satisfies designers and brand people and prevents the first kind of custom scrollbars.
- zelphirkalt 3y ago
  What is the point of satisfying a designer? If they design a product for a customer, then the focus should be on satisfying the customer. If they design a product for themselves to use, OK fine, go ahead. But their expectations should not be pushed onto everyone else. A website is not a playground to try out ones figma crayons making ever more complex figma designs. One of the lessons in about every design course or degree is, that the medium plays an important role. Web design should care about being design for websites. By not caring about the actual website and merely caring about ones figma design, one neglects the medium. The result is a bad design. Instead the design needs to carefully weigh what is easily possible with the medium, functionality, and look and feel.
  - MrPatan 3y ago
    What's possible with the medium, whether you like it or not, is a lot. I understand where you're coming from, but it's not where most users come from. Leaving scrollbars or whatever else unstyled and sticking out like a sore thumb tells those users "they can't be bothered to do it right, but everybody else does". That's the designer's point. If you want to go back to '94 websites so your scrollbars and drop-downs don't look out of place, good luck.
madsbuch 3y ago
> Scrollbars are part of the area of the browser that is outside your scope of concern. This is simply wrong. You might have a scrollbar in your content, which indeed is the scope of concern for the developer.
gureddio 3y ago
Someone re-writes this article every few years. It's not the first time that somebody has pointed out that customising the scrollbar isn't a great idea
ceving 3y ago
Don't use custom font sizes in your blog.
SilverBirch 3y ago
I agree with the overall point, but there's some bits here that are a little bit silly >You might be scoffing at the kilobytes this removal represents, but when it comes to web performance, every little bit counts Go to Apple.com. Do you think that they value minimizing site size or do they prioritize the design first and then figure out how to make it performant? What this argument is really saying is that you should make the value judgement that performance vs quality should be somewhere towards the performance side, but I think plenty of people would make a different decision. You can argue that the scrollbar is extremely low value and therefore performance should be the priority but then... why are you writing an article about scrollbars?
scotty79 3y ago
Did he mention scrollbars in the content of the webpage? Or is it all only about single main scrollbar?
lofaszvanitt 3y ago
3000 word like article :DDDDDDDDDDDDDD
jmaker 3y ago
Fwiw, that huge font size doesn’t invite me to actually read the text. I’d rather have custom scroll bars than try to read when there literally are just three sentences that fit on my iPhone viewport.
- mfru 3y ago
  from the very first text on the page: "Updating in the open Things might look a little janky for a bit, but that’s okay! I am in the process of refreshing the design."
bandie91 3y ago
"AppWeb" and "DocWeb" should be 2 different platforms.
kossTKR 3y ago
I don't know if it was Apple that pioneered the hidden scrollbars but it's extremely stupid and makes everyones lives using a computer much harder when navigating using the GUI, - before that there was always folder size indicator right there. Can we get back to some actual human friendly interface guidelines please? I like both Apple and designers in large parts, but they've gotten too much influence. Also extreme whitespace designs with scrolling hell. Give us back GUI's with lots of content on screen, it may looks dense but is much easier to navigate, and can be pretty if you follow an engineering / power user ethos.
cebsoto 3y ago
Favorite line in this entire article....sums up the thought very nice and answers the "why" when I have to explain why modify components is not a good idea. Ambiguity means less certainty about what the piece of UI is, how you interact with it, and what effects taking action on it will cause. The more you deviate, the more confusing things get.
htek 3y ago
If only this were a law. I can't stand when sites play "hide the scrollbar" or "find the hover sweet spot to display the scrollbar" and I click on where I think the scrollbar is and instead click on a link that's was two pixels away from where I thought I was clicking. How is this accessible? Edit: How does this improve the user experience?
hunter2_ 3y ago
The author's main point is "When you override this expression, you’re indirectly communicating that someone’s personal preferences are less important than your own visual sensibilities" but that's always be the entire point of CSS. The browser comes with default styles, the user can override those, the website can override those overrides, and then extensions can override that. Granted, very few users probably do override the browser default styles due to those defaults rarely getting used anyway given the prevalence of websites doing so... Also interesting that the author makes no mention of the ability for the site to set the color of the address bar area for Android browsers. Seems like the same gripe should be had. Aside: I find it funny that the author says "This phenomenon is why checkboxes use squares and radio buttons use circles" and then links to a page for the reader to find out more, in which the prominent photo is of a radio with square pop-out buttons. But a good read nonetheless.
butz 3y ago
Worst thing is when interaction with scrollbar is considered enough to enable video autoplay and another annoying features.
pgib 3y ago
Worse even than this is that Microsoft Sway implements its own custom _scrolling_!
captainpiggies 3y ago
I just wanted to say thank you. I didn't know about the setting to always show scrollbars on macOS and them being hidden by default was bothering me for a while.
- Tagbert 3y ago
  it does cause problems sometimes when there are embedded scrollable panels (that may not even scroll) where the scrollbars get in the way.
BeFlatXIII 3y ago
CSS scrollbars… those take me back to my middle school experimentations with HTML back when interactive web pages were called "dynamic HTML"
Dracula707 3y ago
so first about size is what 5 lines of css when most companies use react or any other framework. And every website has different theme, style, buttons, checkboxes so what let's don't use css at all then? and user can install extension that let them override css.
reboot81 3y ago
I need to follow in your footsteps and write why websites shouldn’t prevent autofill.
teel 3y ago
Funny to see this link here, just after I saw this site yesterday. I was forced to google how to disable custom scrollbars when I was reading the "A simple hash table in C" link from 2 days ago [1]. The site set the scrollbar width to 4 pixels which was so narrow I could just see it but couldn't grab it with mouse anymore. Totally unusable. [1] https://news.ycombinator.com/item?id=36302552 https://news.ycombinator.com/item?id=36302552

382 points by Twixes 3y ago

On the contrary, we should be encouraging people to customize scrollbars so that scrolling is taken into consideration again. It can help get rid of trends like invisible/hidden scrollbars or those useless horizontal progress bars that shows how far into a page you've read

kypro 3y ago
There's been an ongoing trend in UI design in recent years to assume more and more of the user. The removal of scrollbars from browsers confused my parents. Instead of having up and down arrows by your content now you're just expected to just know that you scroll with your mouse / trackpad. Similarly, modern versions of Windows will just assume you know that the four squares at the bottom of your screen is where you need to click to start using your computer, and Mac will just assume you know the red dot closes the current window. These patterns probably seem obvious to us as power users, but I find average users get endlessly confused by them. And it's not just elderly people who get tripped up by this. I've seen kids who have primarily used phones and tablets growing up get confused when they first use a desktop computer because they haven't yet learnt all the required prerequisite UI patterns. Even as a power user if you switch from Windows to Mac (or vice versa) it often takes some time just figure out all of the completely unintuitive modern UI because the UI designer is lazily assuming you already know how to do everything... Just yesterday my girlfriend (who uses her computer almost every day) asked me for help replying to an email in outlook on her laptop. Confused I asked, "what do you mean you need help replying to an email?". Well, she was confused because she doesn't use outlook much and didn't know she needed to click the small curved arrow icon to reply to an email. For the last 5 minutes she had been stupidly looking for a button that said "reply". While I completely agree with your sentiment about scroll bars, I feel like this a much bigger issue and one that web developers shouldn't be required to fix. The core issue here is that your OS / browser shouldn't be hiding your scrollbar to begin with... This isn't something web developers should be addressing, but the UI designers who think it's preferable for me to have a browser URL bar that is 80% of my screen width at the expense of the word "back" on my back button.
- abhibeckert 3y ago
  > These patterns probably seem obvious to us as power users, but I find average users get endlessly confused by them. They're obvious to power users because we have seen them a million times before. When a web developer does a custom scroll bar that is when "average" users get confused, because suddenly they're presented with something they haven't seen. It's not too much to expect a user to know how scrolling works by default in their client operating system/browser. It _is_ asking too much to expect users to know how scrolling works when you customise how it works. Web developers should not be touching this stuff.
- WWLink 3y ago
  > And it's not just elderly people who get tripped up by this. I've seen kids who have primarily used phones and tablets growing up get confused when they first use a desktop computer It goes the other way as well lol. There's lots of ridiculous random gestures for android/iOS
- Pathogen-David 3y ago
  In general it feels like a lot of UI design these days is optimizing for looking pretty in screenshots and photos rather than being useful as a tool, it's honestly gotten really frustrating in recent years.
  - moritz 3y ago
    A month or so ago, a screenshot of Snow-Leopad-era OS X standard UI controls made the rounds on the fediverse. One forgets so fast with incremental change, but when you take it in with some distance, it’s truly devastating how things have regressed since that time. The Apple folk and adjacent circles like to throw around how “design is how it works™”, but design hasn’t been how it works in Macos for a while (and it’s not better anywhere else).

andersrs 3y ago

The worst pattern I've seen is setting the page height to the viewport height and then placing scrollbars on containers. For example this particular UI library has managed to break print layout and page navigation keys and mouse scrolling until you focus the content div https://www.skeleton.dev/docs/get-started https://www.skeleton.dev/docs/get-started I was once guilty of doing this on a site I made but the users called it out so I fixed it. It's another thing for a UI library to spread this pattern.

yonixw 3y ago
Oh the pain of printing any modern news site with their fixed headers and popping ads. You just select the text and "R-CLK->Print selected" praying that at least the content is just a list of paragraphs (<p>) and nothing more...
- pessimizer 3y ago
  I usually go into the inspector, find the element that contains the story and "screenshot node." Or I go the opposite way and "block elements" with ublock until I get a reasonable page, then delete all of those rules after I print. Unless they have a print stylesheet, of course. People still do those.
- andersrs 3y ago
  Fixed headers and popups that are not a problem per se but it's bad implementations that cause the problems. It's possible to use a print stylesheet to hide certain elements and set the background to white.
deleted 3y ago
[deleted]
luisgvv 3y ago
Saw this once, it was a nightmare to maintain the page once it got out of control

circuit10 3y ago

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).
    - 3y ago

willio58 3y ago

On pages, I fully agree. Within components, I also agree but I've found it hard to push back when a design calls for scrollbars because the alternative is... what? It can be difficult to visually say "Hey, you! There's more to see if you scroll down in this area" You can try to use gradients with fade-outs, you can try to make it so the top of the last item in a scroll area is just visible enough to make it clear something can be scrolled into view. I've also seen actual text-based messages at the bottom of scroll areas to let users know. But at that point, is it really better than creating your own little scroll bar? Really I think we just need better APIs from the browsers to customize when a scroll bar is shown (again, not on the page level but within scrollable elements), and what it looks like. This has already gotten much better over the years but there are still some features that would be great to have in this area. One thing I will say is I really dislike the smooth-scrolling behavior that some sites build in with JS. It's usually broken on macs that already have smooth scrolling and it's just a dumb thing to add.

Sohcahtoa82 3y ago
> One thing I will say is I really dislike the smooth-scrolling behavior that some sites build in with JS. It's usually broken on macs that already have smooth scrolling and it's just a dumb thing to add. I'm fairly sure every platform uses smooth scrolling by default, and so I'm absolutely and utterly baffled as to why web devs think they need to implement it in JavaScript. If you're on a platform without it, or you've explicitly disabled it, there's probably a good reason for it, so re-adding it with JavaScript is taking away agency from the user.
munk-a 3y ago
> Within components, I also agree but I've found it hard to push back when a design calls for scrollbars because the alternative is... what? Accessibility. Mention that blind users will be unable to utilize the site without a lot of additional work and you can usually kill it dead. Custom scrollbars are such a niche thing that usually nobody is married to the idea - I've found it quite easy in the past to kill off those sorts of weird quirks in design with just that word... If you still have issues mention that mobile browsers often do a lot of customization around bounce scrolling and the like. Building this design choice out now likely means that whenever Apple releases a new phone it's quite possible that your site look antiquated and requires some major reworks.

okanat 3y ago

I wonder if there is a way to override the entire web with a custom stylesheet plugin like Stylus for Firefox.

henriquez 3y ago
You could use Gemini as an alternative to HTTP / HTTPS. No weird surprises in a text-based browserspace.
- okanat 3y ago
  This is a non-answer though. Most of the web is in HTTP nobody can change that.

pvinis 3y ago

this post could have been way less that a million lines long. maybe if it had a nice colored scrollbar it would be more pleasant to read. kidding aside, it is longer that it could be, to get the point across. maybe the browser just needs a similar setting to the macos and windows one, to never use css on scrollbar, and we're good?

_madmax_ 3y ago

I'll use whatever the hell I want, lol.

preommr 3y ago

> Don't use custom CSS scrollbars Alright, I guess I'll go back to using js scrollbars instead /s I hate articles like this because they present highly opinionated solutions as something definite even though it has a narrow focus on what the author cares about. Web apps can be incredibly powerful and convenient, sometimes a scrollbar is in the middle of the page like with that codepen. In those situations, being able to style and control the width of the scrollbar is useful. How about we hold developers accountable for their work instead of trying to ruin it for the rest of us because a minority do something badly.

abhibeckert 3y ago
> being able to style and control the width of the scrollbar is useful No it's not. I have operating system wide settings for how scroll bars should work and the rules are complex with visibility and size of the scroll bar changing from one second to the next. I expect my scroll bar settings to apply to all websites and they are significantly better than what codepen does. Codepen also doesn't allow me to scroll past the beginning/end of the file, which feels jarring and just wrong with a touch scroll device. And I'd bet it also falls apart with assistive technology for people who can't physically operate a mouse or trackpad, which in most countries is illegal. Why open yourself up to those issues?
- fbrchps 3y ago
  > highly opinionated solutions as something definite even though it has a narrow focus on what the author cares about Most users either don't have such strong opinions about their scroll bars, or would prefer it looks coherent with the application, or OS-native (your preference). But I can almost guarantee the larger group of non-technical users will have never thought about the styling of their scrollbars for more than a few seconds. Also in terms of accessibility, so long as they're doing CSS-only changes, and the bar is sized compliant and has proper focus states, assistive technology won't care.
  - pessimizer 3y ago
    They won't care as long as it's consistent. The only way for it to be consistent is for people not to touch it.

bbrks 3y ago

One of my very first blog posts[1], which took off at the time on HN[2] was on this topic - in reaction to the trend of "horizontal page progress bars" (a.k.a. scroll bars!) What's old is new again... and again... and again... :) [1] https://bbrks.me/reinventing-scrollbars/ https://bbrks.me/reinventing-scrollbars/ [2] https://news.ycombinator.com/item?id=6246777 https://news.ycombinator.com/item?id=6246777

karaterobot 3y ago

> Scrollbars are part of the area of the browser that is outside your scope of concern. No, they're actually in my scope of concern, that is the whole point of your article. The reason they were brought into my scope of concern is that a lot of people had a use case for styling custom scrollbars. I have a use case for it myself. If you're saying "don't abuse your ability as a developer and make inacessible websites" then yeah, okay. But taking options away from people because they might theoretically make bad moves with them is not a good strategy. If you took away every CSS attribute I could use to make inaccessible websites, we wouldn't have anything left. You'd be surprised what I can mess up. Better to teach people how to do it right and why.

kelnos 3y ago
Taking all the flexibility away would be fantastic. I wish all webapps looked as close as possible to native apps, and couldn't style things like buttons.
- barneygale 3y ago
  Shoo. You're ruining the web!
- Drew_ 3y ago
  Safari, Edge and Chrome don't style any HTML elements like their native counter parts.
  - layer8 3y ago
    Which is part of what is being criticized. Say about Internet Explorer what you will, but it used native controls.
- sapling-ginger 3y ago
  > looked as close as possible to native apps This is a meaningless statement, because even native apps don't "look like" native apps. No operating system has a universal style across all native apps, and some (Windows) aren't even internally consistent with the OS's apps.

RobotToaster 3y ago

Does firefox ignore this? The codepen example doesn't seem to work for me.

rektide 3y ago

There was a quick starburst trend around 2010 where super-fancy css componentry was being heavily explored & all sorts of interesting but not necessarily better stuff was being done, with radical redesigns. My mini-project submission for a job I got was using a super melted Geiger esque up-down button set. I've tried to go back & find evidence of this era, to find more examples of these heavily glitzed up components. And wow, so much of this has disappeared entirely off the net. Maybe I'm lacking the right keywords. But this feels like a mega flash in the pan that came & went super fast.

meindnoch 3y ago
Like this? https://pbs.twimg.com/media/Fb5HJBFWQAIH09w.jpg https://pbs.twimg.com/media/Fb5HJBFWQAIH09w.jpg

kibwen 3y ago

On the contrary, I'm completely in favor of custom CSS scrollbars because it's unimaginable that websites could do worse than modern OSes already do when it comes to scrollbars. If anyone here has a time machine, immediately after you've finished killing Hitler may I recommend that you gently persuade Jony Ive away from the terrible decision to make scrollbars hidden, low contrast, and impossibly thin.

the_other 3y ago
Personally, I like the Apple ones. I’m partially sighted, so I should probably want the stronger visual design, but I don’t. What I prefer is consistency with the OS. My OS is my main tool for interacting with the digital realm. My life would be easier if the conventions were more evenly applied. Custom scrollbars concern me that my OS defaults are being overriden: will the field scroll at the expected speed; can I flick it and catch it as I’m used to; is the scale expressive of content size? Custom scrollbars tell me that the developer doesn’t care about me, they care more about their brand manager and their pay check. This suggests the product they represent wont suit me. Along with intrusive pop-ups, subscription overlays, and “we value your privacy”, it’s a clear sign I should not engage with that provder.

zokier 3y ago

How many of the arguments apply to any CSS styling?

minebreaker 3y ago
Isn't that why so many people love Firefox's reader mode?
defanor 3y ago
Indeed, I was just about to comment on the linked page overstyling fonts and colors while suggesting to avoid overstyling other elements. The title can be clipped to "Don't use custom CSS" while reusing the same justifications.

Aeolun 3y ago

> You might be scoffing at the kilobytes this removal represents, but when it comes to web performance, every little bit counts I read this, and I get a very good idea of what the rest of the post will contain.

chrsjxn 3y ago
The awesome thing is that this comes right after an example that uses about 200 characters... I know we love to talk about optimizing web contents, but a single selector and a few hundred bytes (before minification and compression...) is not significant

adamredwoods 3y ago

>> Apple learned the lesson about visible scrollbars the hard way when it introduced its ultra-minimal, disappearing scrollbar indicators. >> There’s no visual indication that there’s more content present in this window—the only way to discover it is to scroll downwards. However, without an affordance to indicate the presence of additional offscreen content, the chances are low that someone will bother to check. I appreciate the callout that Apple is an infringer on removing the scrollbars, which is a bad UI practice. For the entire lifespan of the web, overflow content indicators have been (aka scrollbars), for better or worse, an inherent function of the browser.

em_te 3y ago
Moreover, Google said they did a study when they first released their minimalist homepage design and when people saw lots of white space below the search bar, they assumed the page wasn't finished loading yet and more content was to come. People were accustomed to long pages like Yahoo's homepage with lots of content below the search bar. They solved it by adding a footer section with typical copyright text and people understood that the page was finished loading.

robomc 3y ago

What would be nice would be some sort of solemn undertaking that the presence or absence of a browser scrollbar will never alter the placement of the content.

leeoniya 3y ago
https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-g...

jmbwell 3y ago

I recognize that web developers want full control over the user experience, usually to the point of reimplementing all of the native UI widgets provided by the user’s OS. As a user, I prefer for my OS to do things my OS does, including styling my widgets. My scrollbars, my scrolling behavior, window chrome, all of it… whether it’s good or bad or right or wrong, that’s between me and my OS. As a user, I hate when web apps mess with scrolling. It breaks affordances I use, like tapping at the top of the screen to jump to the top of the page, or home/end keys on desktop. It is inevitably a worse experience than native scrolling, no matter how hard you try. Facebook mobile web for example is basically unusable right now because it’s trying to overthink scrolling. If Facebook can’t get it right, I’m not sure what makes anyone else think they can. And why would anyone want to? Honestly! Microsoft and Apple have already done all that work. As for scroll bars and other widgets, again, right or wrong, that’s not for some web site to mess with. Sorry if the developer doesn’t like the way it looks… they only have to deal with it while working on it. As a user, I am stuck with the developer’s choices, even if they override my own choices, which I’ve made in my OS, which is where those choices belong. If you’re going to clobber native experience, I would argue, don’t do it unless there is absolutely no other option. Corollary: there is always another option.

eviks 3y ago
Facebook isn't known for great design, so the fact they can't get it right tells us very little Similarly with the MS/Apple - if they had already done all the work, they would allow you to force your scrollbar choice > Corollary: there is always another option What's your other option to only show wide scrollbar in large documents since these are the only ones I actually need scrollbar in?
grishka 3y ago
YouTube's custom scrollbars that take actual space on screen at all times annoyed me so much that I made a userscript that got rid of them. I made the choice to use overlay scrollbars, and I will enforce it if needed.
- Buildstarted 3y ago

gatkinso 3y ago

I feel the same way about scroll-jacking and smooth scroll.

Sujeto 3y ago

I have an application that looks terrible if I don't make the scrollbar transparent. I thought this was going to be about not using those horrible javascript scrollbar libraries, which make the code a lot more complex (I tried them all).

inetknght 3y ago
> I have an application that looks terrible if I don't make the scrollbar transparent. You have an application that works terrible if you make the scrollbar transparent. Transparent scrollbars are not intuitive.
- Sujeto 3y ago
  There's a chat on the left side, right side shows media. If I allow scrollbars to render normally the whole site is split in 2, in the middle being a scrollbar, which looks bad especially if not overlay. I've considered not caring about it and just let the scrollbar, but it bothers me. It's my application anyway, the browser is not just a document reader anymore, it's an application framework (as well).
  - inetknght 3y ago
    > If I allow scrollbars to render normally the whole site is split in 2, in the middle being a scrollbar, which looks bad especially if not overlay Well that's your opinion. But I would rather see a scrollbar in the middle to show me that I can actually scroll something. Otherwise it's a hidden feature and hidden features are not features, they're bugs.

WirelessGigabit 3y ago

Also don't use buttons that don't show me the link I'm navigating to. If you must have a different style, style them around an `a href`, not a `button`. And actions should be buttons, not links. I'm looking at all of those cookie websites with a 'link' that says 'Confirm choices' and a button that says 'Allow all'. Instinctively we go to the button, not the link. Weirdly enough I responded on the Image send to Microsoft via MS Edge article about how even Microsoft, the writer of LOTS of documentation on how to make good UIs, abuses all these things. Now, of course we could argue about how these things just visuals, but that's not completely true. Lots of screen readers depend on the semantics of the document structure to actually identify objects correctly. Button? Action, edit, sign up, delete, .... Something that actually changes something. Link: navigation...

agos 3y ago
aria roles solve that problem easily for screen readers, so you can use buttons for navigation and text links for actions without big issues
- polydevil 3y ago
  No, they don't. Aria roles are not for making one tag to work like another. (Otherwise what is the point of having different tags with different semantics?). Aria is for making inaccessible html more accessible. Links can not be disabled (buttons can) - so they dont rely on js to work; Buttons rely on js (except for submitting the form). There is no way to interchange one with another without sacrificing usability.

Waterluvian 3y ago

Scrollbars are frustrating to handle. Getting their actual size if you need to do stuff like compensate for a virtual table is really tedious. And Macs do them entirely different from everyone else, so that’s not nice either.

graycat 3y ago

Several billion people understand and make good use of the standard HTML scroll bars. For any change, on the first day, only the programmer understands the new scroll bars. For an Internet user who each month or so goes to dozens, maybe hundreds, of Web sites, all the new scroll bars are something new to learn likely particular to that site. So, for that user, a significant part of the Internet becomes dozens or even hundreds of times harder to use. Same for standard HTML push buttons, links, check boxes, radio buttons, multi-line text boxes, single line text boxes (and the ones for passwords), etc. Changes make the site obscure and significantly more work to use. Web site owners: When I see a Web page with an obscure user interface, commonly I just do a single left click on the X in the upper right corner of the Web browser instance displaying that page. Beyond an obscure user interface, often I can conclude that the Web site does not want me to see the content on their Web pages because they cover up the content with pop-up windows or expand and contract some header material at the top of the page, material that wastes limited vertical space on my screen. Another problem is Web pages that follow my mouse pointer and respond to its position without my giving a click. Big interruption in using the site. Nearly always I'm just trying to bring the window to the top of the Z-order so, instead, have to swat like a dozen flying insects the various responses to the mouse click -- again, I do want to see the page and just want to bring it to the top of the Z-order. Then there is Web site code making the window larger -- again it's like swatting flying insects. No, no, 1000 times no, with rare exceptions, I do NOT want any one page to hog my screen area. The reason is fundamental: In visiting the page, I'm trying to get something DONE, and that requires seeing at least two windows, maybe a few more than two. When one program takes up all or too much of the screen area, I can't see the other windows I need and, thus, can't get the work done. There is an old remark that goes something like "Just because you could doesn't mean you should."-

denton-scratch 3y ago
> Same for standard HTML push buttons, links, check boxes Interesting that you mention checkboxes. For a long time native checkboxes on Linux (distro?) would come up impossibly tiny if you had a decent-sized screen. They were hard to hit accurately with a mouse, and impossible with a trackpad. That seems to have been cured now, but I don't know when it was fixed.

gwern 3y ago

> When you style things on the web, you get control over almost the entire experience. From ten thousand feet up, your scope of concern is this: The mockup scrollbar looks nothing like scrollbars are now. > Do you need to make someone download that extra data? > > Spoilers: you don’t. Scrollbars work without CSS. No, they don't, because web browsers have been busy removing scrollbars as much as possible. As I type this, there is no scrollbar on my screen because Firefox no longer does that. For a moment, I thought maybe FF still showed at least 1 pixel of the scrollbar, but I scraped it off with my fingernail and it turned out to be a cat hair. The scrollbar appears only for like a second before 'helpfully' fading out, and is a few pixels wide (on a 4k portrait monitor where I'm not exactly hurting for space). Chromium still has a semi-reasonable scrollbar, but I can't vouch for the official Google Chrome. Safari and Mac OS/iOS have, of course, been years ahead of everyone else in the wonderful pro-user innovation of 'hiding scrollbars and making them a pixel wide if absolutely forced to display one'. > ...This is why Apple introduced a preference to always show scroll bars...Windows followed this path blazed by Apple Yes, a preference to go back to the old standard behavior, which in designer-speak means "we done f-ked up, but we hate real users and love the sleek minimalist appearance https://asktog.com/atc/the-third-user/ https://asktog.com/atc/the-third-user/ more, so this is our way to get our users to shut up". And 'blazed', in this case, is 'lit on fire many decades of hard-earned UI experience'. > As an aside, I set the operating systems I use to always show scroll bars. Which is why you should support custom CSS scollbars to negate browsers & OSes hiding them.

chrismorgan 3y ago
> As I type this, there is no scrollbar on my screen because Firefox no longer does that. If you’re using Linux: blame GNOME for this; in GTK 3 and 4, they actively removed your ability to get non-overlay scrollbars without each individual app manually supporting the concept. So there’s no global switch or anything like on macOS or Windows. Firefox has a setting “Always show scrollbars”, but precious little other GTK software will support non-overlay scrollbars in any way.
- gwern 3y ago
  The problem is, there are so many to blame. It's not just GNOME: it's Microsoft, and Apple, and GNOME, and... It can't be fixed by just one entity refusing to go with the flow; the flow is the problem. As long as there seems to be some sort of invisible consensus by designers worldwide that Scollbars Are Bad, the problem will spread and infiltrate systems, even ones which ostensibly default to scrollbars. ('A setting' is also not a fix but a copout as I already pointed out - you know >99% of users will never change it, especially on mobile. Whether open source or closed, maintainers are always the same when it comes to taking the hard path of fixing something's design or the easy path of saying 'you can set an option, CLOSED'.)

codeptualize 3y ago

I agree with many points but there is definitely a need for custom scrollbars. The reality is that if you have scrolling in the page (like a column layout for example), you kinda have to customize the scrollbars. If only to not break your layout as scrollbars are completely different everywhere, hidden, different widths, some ugly, some nice, no reliable way to detect the situation, it's a mess. I would opt for more options: give us better tools to style (around) scrollbars, give us the tools to honor what the user prefers, to know when and when not to blend it in with the UI, to increase contrast, or to just leave it alone. Just not customizing is not a realistic solution for a lot of situations.

lolinder 3y ago
Your UI really shouldn't be so unresponsive that the width of an element's scroll bar throws off your design. As for the aesthetics of the scroll bar: it might look ugly to you, but that's what the user expects their scroll bar to look like! Designing well for web requires a bit of a paradigm shift compared to designing a print document or even a native app. You have to accept that you're going to be a guest in the user's browser, and that means you don't have control of everything. Failing to accept that just leads to frustration, but if you can embrace it and strive to be a good citizen of the user's browser, the resulting symbiosis can be beautiful in its own right!
- deleted 3y ago
  [deleted]
- codeptualize 3y ago
  > but that's what the user expects their scroll bar to look like! You base that on..? I’ve had users complain about their native scrollbars more than once. Native scrollbars can make things look very broken. In terms of responsiveness, true for a normal website, but sometimes impossible in more complex ui elements (like I said, not the page scroll, but in page scrollable elements) I would really like to see some research on this idea that people prefer native elements, it’s not what I see in user tests and the feedback I get. My experience is that people want a functioning app that doesn’t look broken. My whole point is: we should be able to provide a great experience that’s accessible and allows the user to give their preferences (like prefers reduced motion).

presentation 3y ago

One thing I didn’t expect was that for a large data table that allowed side scrolling, Windows users comfortable with Excel didn’t know that they could scroll side to side because the scroll bar fell below the fold. I ended up needing to measure the page to set the height of the table to make sure that the table wouldn’t be taller than the page. But what I really wanted was to sticky the scroll bar so that it was always visible, or to display it at the top of the table instead of the bottom. I want to style scroll bars for this, not to make them prettier.

tsian2 3y ago
I did make a scrollbar that appeared to stick to the bottom of the table. I used a div with the same width as the table, used a scroll event listener to update the tables actual scroll position and only had it appear when the user was currently over a table and that table overlapped the bottom of the viewport. It worked well in the sense that people would use it without thinking about it.
derefr 3y ago
That's not so much "styling the scroll bar"; that's "trying to tell the OS widget library's metrics-policy logic its business, because you know better than it does, because it's insufficiently smart." If you think about it, a "smarter" OS widget library would always "float" scrollbars at the edge of the visible part of the viewport that the overflowing surface occupies. No configurability needed — it's just always better. So why expose the ability to do that for certain scrollbars in CSS — rather than just making all scrollbars everywhere always do that?
- presentation 3y ago
  That's cool and all, but until I have enough influence personally to dictate Microsoft's design, I don't really have a choice but to depend on web APIs to achieve the desired effect.
  - derefr 3y ago
    You can dictate GTK and Qt's design. Also, I think for Chrome at least, it draws scrollbars using its own widget library — built on top of Skia, I think? Not sure what the widget-library part itself is called. You could definitely contribute to that.

bee_rider 3y ago

Is it possible to configure Firefox to ignore custom scroll bars? I haven’t noticed many at all. IMO it is a dumb feature, but there’s no harm in having it in CSS for people who want it, as long as the rest of us can ignore it.

deleted 3y ago

[deleted]

nawgz 3y ago

I mean, I use custom scrollbars so my apps look the same on each OS. Do you propose that I should instead accept windows making horrible ugly things that take up more space rather than just showing a minimal scroll bar? Seems like a non issue to me. My users are much happier with the more minimalist scrolls I’ve implemented over windows stealing 30px per scrollbar

codedokode 3y ago

Modern disappearing scrollbars in Linux are an awful design: - as scrollbar in browser disappears, I cannot see the position on the page and whether it is scrollable at all - as scrollbar handle is very narrow, it is difficult to drag it You might ask, why drag the scrollbar handle? Well, when you have tens thousands of lines in the terminal, it will take a long time to scroll it using touchpad or mouse wheel.

eviks 3y ago
It's an awful design because it ignores one is the most important factors of scrolling - document length. But then having wide scroll bars in short documents where you'd never use them is also bad design
- quickthrower2 3y ago
  It is good design to have "wide-enough-for-long-doc" scrollbars in short documents for principle of least surprise.
  - eviks 3y ago
    That's repeating the same mistake - trying to force one generic principle onto every situation. Opt-in can solve that - only users that don't get surprised by a lack of useless elements can remove them
    - quickthrower2 3y ago
      Not a mistake. At worse a tradeoff. Hiding a scroll bar when you go below some arbitrary document height that would classically warrant a scroll bar is just confusing. People who use a mouse to scroll will not know what to do and assume there is a bug. And sometimes you want scrollbar level control even on a short document. It is not forcing them to use the scrollbar: keyboard shortcuts and menu items should still work as well.
      - 3y ago

darepublic 3y ago

I like the site csstricks.com but a while back I was disappointed to see they were customizing their scrollbar. It seemed really tacky and unappealing

deleted 3y ago

[deleted]

chrismorgan 3y ago

> Modifying the scrollbar via CSS means the scrollbar will effectively disappear when a Forced Color mode theme is applied. Again, if you can’t see it, you won’t know it’s there. > Much like with Forced Colors Mode, custom CSS scrollbars will not honor the presence of an enabled Increased Contrast Mode. These both just sound like browser bugs. In those modes, of course the browser should be ignoring or further modifying scrollbar colour changes. MDN on scrollbar-color: “Note: @media (forced-colors: active) sets scrollbar-color to auto.” (However, I can’t find any spec citation for this, not in Media Queries Level 5 or CSS Scrollbars Styling Module Level 1.) —⁂— Here’s my take: • Don’t use scrollbar-color on the document area, but treat this outermost scrollbar as browser chrome. In the early days of scrollbar-color it helped to set a suitable color-scheme setting in order to reliably get light or dark scrollbars as appropriate, but I don’t think any browser really needs that any longer (though it’s still a good idea, especially for other controls). • It’s OK to use scrollbar-color on scroll areas within the document, so long as you maintain suitable contrast. Transparent tracks are a little risky, but at least acceptable in most inner scroll areas. • On scrollbar-width, there’s a reason the values are `auto | thin | none`. As the spec says <https://w3c.github.io/csswg-drafts/css-scrollbars/#scrollbar-width https://w3c.github.io/csswg-drafts/css-scrollbars/#scrollbar...>: “The primary purpose of this property is not to allow authors to chose a particular scrollbar aesthetic for their pages, but to let them indicate for certain small or cramped elements of their pages that a smaller scrollbar would be desirable.” If you have a scrolling sidebar, for example, `scrollbar-width: thin` is completely reasonable. Other than that, there’s nothing useful to touch. • Never use the older ::-webkit-scrollbar* pseudoelements (which are the only way to get things like 1px wide scrollbars, like the article speaks of). Their degree of control was a mistake <https://w3c.github.io/csswg-drafts/css-scrollbars/#out-of-scope https://w3c.github.io/csswg-drafts/css-scrollbars/#out-of-sc...>, and their implementation never got beyond half-baked anyway, so that touching them at all harms scrollbar accessibility on at least Windows with non-overlay scrollbars (you lose the arrows at the ends). • With all of these new scrollbar CSS properties, note how thoroughly they’re defined as hints. If certain accessibility modes make scrollbar tweaks break things, that’s very probably the browser’s fault. And it’s an unhappy situation when authors have to consider browser bugs (though it certainly does happen sometimes).

eviks 3y ago

> There’s no visual indication that there’s more content present in this window—the only way to discover it is to scroll downwards. However, without an affordance to indicate the presence of additional offscreen content, the chances are low that someone will bother to check. > This is why Apple introduced a preference to always show scroll bars. But the proper solution is to add the info/affordance in that specific instance instead of always wasting space even when you don't use the scroll bar. This would also allow you to have a more convenient wide scroll bar for when you actually need to use it (in very large documents/lists, though currently you can't setup your scroll bar to depend on that) And here is the main problem with the article - this general approach blocks would block all UI innovation until some browser/OS vendor implemented something poorly (of course, this doesn't mean your implementation will be better, but someone else's will be)

pickingdinner 3y ago
I was under the impression "scrollbar = more to see" has been somewhat of a standard for a while now. The Mac example is just one of those classic UI fails. The worst are the pages where the scroll wheel doesn't work, even when you can see the scrollbar just fine. I'm always baffled, since no simple page would have that problem. Clearly they developed it and didn't care for breaking it. In html I would sometimes force the scrollbar to always show to prevent layout stuttering. But otherwise, changing the color of the scrollbar to match the fg and bg colors of the page shouldn't be too big of a deal. And I wouldn't mind if some browser skins would change the default scrollbar colors to match, either. Scrollbars are already stylized across the web and across programs. Most users don't mind it. With options come the bad choices, which anyone can list on one page.
- eviks 3y ago
  > "scrollbar = more to see" has been somewhat of a standard for a while now. That's not a great standard because it conflates conveying information with providing control. 001 px width is enough to convey isScrollable info, but makes it impossible to scroll 100 px width makes it easy to scroll, but is a waste of space to convey convey isScrollable info

deleted 3y ago

[deleted]

TobyTheDog123 3y ago

Not to be an asshole, but --- well, I guess I'll be an asshole. This is good, thoroughly-researched advice with just enough condescension that I walked away from it kinda wanting to style my own CSS scrollbars. Additionally, there's a comment on this post replying to someone with "You'll live" which really isn't helping the case presented in the article. I won't, I don't have a good reason to, but I had a nice nostalgia trip to w3schools: https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp https://www.w3schools.com/howto/howto_css_custom_scrollbar.a...

quickthrower2 3y ago

Too much fun to be had, Streisand: body { scrollbar-color: #f16d4f #cccccc; &::-webkit-scrollbar { width: 13rem; } &::-webkit-scrollbar-track { background: #000; } &::-webkit-scrollbar-thumb { background-image: url("https://picsum.photos/200/200"); background-repeat:none; height: 13rem; border-radius: 13rem; } }

nathias 3y ago

a website should be obvious to scroll without scrollbars

LinAGKar 3y ago

What's going on in that Finder video? >There’s no visual indication that there’s more content present in this window Not only that. There is a clear indicator that there isn't more content, since the last row isn't filled. Only, there is, but one of the rows has randomly been truncated for some reason?

sharkbird2 3y ago

I largely agree, but the one thing I have been wanting to do sometimes is too be able to put marks/indicators on the scrollbar of where important pieces of information is in the flow. A lot like chrome does when you use ctrl+f to search for a word.

LeonB 3y ago

The OS gets the scrollbar wrong so often that as a user and developer I’ve found I need to take care of it. It’s fine relying on the “platform” but the platforms are just criminal cartels holding users and apps hostage. Two specific examples, just on scroll bars. I’ve found the platform failing to support dark mode and failing to support mixed high DPI scenarios. Both of these failings result in poor accessibility and real pain for real users. As a lowly app developer I don’t have the resources to do it perfectly for my users. But the OS is failing badly enough that I end up having to do the work. It’s not out of vanity, which is the only reason TFA author can imagine.

naillo 3y ago
Making a custom scrollbar because it doesn't support dark mode is worse for accesibility overall. Your custom scrollbar likely won't work well with tools disabled used for scrolling that isn't the mouse.
- LeonB 3y ago
  I am a user who uses accessibility tools and is stating that the operating system is failing in both the size and the tone of the scroll bar. Btw, trivialising dark mode is not cool. I have photosensitivity at times and when it’s bad the pain of items appearing bright coloured is excruciating. Just so you know. (Special shout out to platforms who flash a huge white rectangle before rendering the dark mode content. It’s like pins in each eye.) The confidence with which you state “is worse for accessibility overall” is just breath taking. Had you written “may be” instead of “is” and “in many circumstances” rather than “overall” - then I would understand that you were thinking about this. But no you’re claiming perfect knowledge of a situation that you are not inside and which I am inside. The operating system gets it very wrong in very many circumstances. I end up having to provide - configurable - alternatives to overcome some of the egregious mistakes. If the operating systems start to get it right- awesome I can make the overrides opt in not opt out.

al_be_back 3y ago

the OP mentioned apple's headaches with the "disappearing" scrollbar, yes I often experienced that in Apple's own site, iTunes Connect (manage App submissions, rejections/comments etc). Disappearing scrollbars on TextArea with large amounts of text made is very easy to miss whole paragraphs of text, can be very costly. I'm for "Customizing the UI", as long as it helps the User get the most out of the site.

weird-eye-issue 3y ago

What about when you have scrollbars inside the "scope of concern" the author pointed out.. The sweeping statement in the title doesn't feel fully thought out even after the author ranted for over 3,000 words

dahwolf 3y ago

Another fun one is scroll-triggered animations, as one would commonly find on an Apple product detail page, as just an example. The problem is that it assumes smooth scrolling input, typically a touchpad or a touch-only device. The experience completely breaks down into wild stuttering when scrolling with friction: mouse-wheel that scrolls with discrete steps or the classic "drag the scollbar" interaction. Even when using smooth scrolling input it sucks, as you carefully need to time/verify your scroll speed as content appears/disappears based on force applied.

MrPatan 3y ago

Custom scrollbars, as in "I'll hijack the scroll events and draw custom stuff on the side of the element" kind of custom, yeah, that's bad and buggy and annoying. Being able to style native scrollbars is a godsend which satisfies designers and brand people and prevents the first kind of custom scrollbars.

zelphirkalt 3y ago
What is the point of satisfying a designer? If they design a product for a customer, then the focus should be on satisfying the customer. If they design a product for themselves to use, OK fine, go ahead. But their expectations should not be pushed onto everyone else. A website is not a playground to try out ones figma crayons making ever more complex figma designs. One of the lessons in about every design course or degree is, that the medium plays an important role. Web design should care about being design for websites. By not caring about the actual website and merely caring about ones figma design, one neglects the medium. The result is a bad design. Instead the design needs to carefully weigh what is easily possible with the medium, functionality, and look and feel.
- MrPatan 3y ago
  What's possible with the medium, whether you like it or not, is a lot. I understand where you're coming from, but it's not where most users come from. Leaving scrollbars or whatever else unstyled and sticking out like a sore thumb tells those users "they can't be bothered to do it right, but everybody else does". That's the designer's point. If you want to go back to '94 websites so your scrollbars and drop-downs don't look out of place, good luck.

madsbuch 3y ago

> Scrollbars are part of the area of the browser that is outside your scope of concern. This is simply wrong. You might have a scrollbar in your content, which indeed is the scope of concern for the developer.

gureddio 3y ago

Someone re-writes this article every few years. It's not the first time that somebody has pointed out that customising the scrollbar isn't a great idea

ceving 3y ago

Don't use custom font sizes in your blog.

SilverBirch 3y ago

I agree with the overall point, but there's some bits here that are a little bit silly >You might be scoffing at the kilobytes this removal represents, but when it comes to web performance, every little bit counts Go to Apple.com. Do you think that they value minimizing site size or do they prioritize the design first and then figure out how to make it performant? What this argument is really saying is that you should make the value judgement that performance vs quality should be somewhere towards the performance side, but I think plenty of people would make a different decision. You can argue that the scrollbar is extremely low value and therefore performance should be the priority but then... why are you writing an article about scrollbars?

scotty79 3y ago

Did he mention scrollbars in the content of the webpage? Or is it all only about single main scrollbar?

lofaszvanitt 3y ago

3000 word like article :DDDDDDDDDDDDDD

jmaker 3y ago

Fwiw, that huge font size doesn’t invite me to actually read the text. I’d rather have custom scroll bars than try to read when there literally are just three sentences that fit on my iPhone viewport.

mfru 3y ago
from the very first text on the page: "Updating in the open Things might look a little janky for a bit, but that’s okay! I am in the process of refreshing the design."

bandie91 3y ago

"AppWeb" and "DocWeb" should be 2 different platforms.

kossTKR 3y ago

I don't know if it was Apple that pioneered the hidden scrollbars but it's extremely stupid and makes everyones lives using a computer much harder when navigating using the GUI, - before that there was always folder size indicator right there. Can we get back to some actual human friendly interface guidelines please? I like both Apple and designers in large parts, but they've gotten too much influence. Also extreme whitespace designs with scrolling hell. Give us back GUI's with lots of content on screen, it may looks dense but is much easier to navigate, and can be pretty if you follow an engineering / power user ethos.

cebsoto 3y ago

Favorite line in this entire article....sums up the thought very nice and answers the "why" when I have to explain why modify components is not a good idea. Ambiguity means less certainty about what the piece of UI is, how you interact with it, and what effects taking action on it will cause. The more you deviate, the more confusing things get.

htek 3y ago

If only this were a law. I can't stand when sites play "hide the scrollbar" or "find the hover sweet spot to display the scrollbar" and I click on where I think the scrollbar is and instead click on a link that's was two pixels away from where I thought I was clicking. How is this accessible? Edit: How does this improve the user experience?

hunter2_ 3y ago

The author's main point is "When you override this expression, you’re indirectly communicating that someone’s personal preferences are less important than your own visual sensibilities" but that's always be the entire point of CSS. The browser comes with default styles, the user can override those, the website can override those overrides, and then extensions can override that. Granted, very few users probably do override the browser default styles due to those defaults rarely getting used anyway given the prevalence of websites doing so... Also interesting that the author makes no mention of the ability for the site to set the color of the address bar area for Android browsers. Seems like the same gripe should be had. Aside: I find it funny that the author says "This phenomenon is why checkboxes use squares and radio buttons use circles" and then links to a page for the reader to find out more, in which the prominent photo is of a radio with square pop-out buttons. But a good read nonetheless.

butz 3y ago

Worst thing is when interaction with scrollbar is considered enough to enable video autoplay and another annoying features.

pgib 3y ago

Worse even than this is that Microsoft Sway implements its own custom _scrolling_!

captainpiggies 3y ago

I just wanted to say thank you. I didn't know about the setting to always show scrollbars on macOS and them being hidden by default was bothering me for a while.

Tagbert 3y ago
it does cause problems sometimes when there are embedded scrollable panels (that may not even scroll) where the scrollbars get in the way.

BeFlatXIII 3y ago

CSS scrollbars… those take me back to my middle school experimentations with HTML back when interactive web pages were called "dynamic HTML"

Dracula707 3y ago

so first about size is what 5 lines of css when most companies use react or any other framework. And every website has different theme, style, buttons, checkboxes so what let's don't use css at all then? and user can install extension that let them override css.

reboot81 3y ago

I need to follow in your footsteps and write why websites shouldn’t prevent autofill.

teel 3y ago

Funny to see this link here, just after I saw this site yesterday. I was forced to google how to disable custom scrollbars when I was reading the "A simple hash table in C" link from 2 days ago [1]. The site set the scrollbar width to 4 pixels which was so narrow I could just see it but couldn't grab it with mouse anymore. Totally unusable. [1] https://news.ycombinator.com/item?id=36302552 https://news.ycombinator.com/item?id=36302552