17 ms·

Two Browsers Walked into a Scrollbar

193 points by robin_reala 7y ago

thomasfl 7y ago
This is probably only interesting for web developers. Maybe a sub-hackernews would make hacker news better? Wait... that's old.reddit.com.
- saagarjha 7y ago
  I’m not a web developer and I found it interesting enough to read.
jvzr 7y ago
I am of the opinion that you should not mess with my scrollbars. I like them to be visible and wide, because (a) I like to know a page's length and my current progress, and (b) I'm a bit blind and I don't want to hunt for an 'unobtrusive' scrollbar. There are options at the system level, I find it great that most browsers follow them and sites cannot willy-nilly change them without my consent.
- zamadatix 7y ago
  The article covers these points in great detail and spends significant time avoiding exactly what you describe with it's final workaround.
  - jvzr 7y ago
    I know, I read it. But it doesn't work like it says it does. I have Firefox with Windows 10, and the final result ('only styles obtrusive scrollbars') is way too unobtrusive for my tastes. It sorts of look like the Windows 10 scrollbars, but is 1/5th or one quarter the size of a regular scrollbar, and is hidden among the background of the page. Not what I prefer, and what I set up in my OS settings.
  - lhorie 7y ago
    The core problem, as I see it, is of someone else deciding that "unobtrusive" scrollbars are better. On a mac, to actually grab the scroller for scrubbing, you need to scroll a bit to make it visible and then manage to bring your cursor into a tiny area using the trackpad within a few seconds before the scroller disappears. If you miss, clicking activates window resizing. UIs need to be functional first. Being pretty should never trump being functional.
    - IggleSniggle 7y ago
      On a Mac, this is configurable. The article talks about this, and about respecting user configuration when possible.
      - lhorie 7y ago
        > configurable I mean, if I write an app and hide a "dysfunctional prettiness [Y/n]" configuration somewhere in settings, is that a good thing? I'd argue there are at least two better options that are trivial to implement, and surely more if one cares to do UX due diligence when trying some novel design.
        mikestew 7y ago
        I'd argue there are at least two better options... Wasn't your original complaint that someone decided what was "better"? Or are you complaining that they didn't take your choice? Point being that someone that decided otherwise thought they had a good reason for their decision, too. In this case, it could be argued that trackpads reduce the need for the scrollbars. (I have no idea what the real argument for such UI behavior is.)
        lhorie 7y ago
        I'm talking in generalities. The status quo used to be "scrollbars are visible things". If you're going to change the status quo, it behooves avoiding a dark pattern (like e.g. privacy settings turned off by default). The two better options for UX changes (generally) are to leave it alone, or to create a configuration that defaults to the old way of doing things. You probably heard again and again of some random company doing some major redesign with good intentions and ending up pissing off users. In my experience, the backdrop in many of those cases is that UX changes get rolled out because people need to justify their jobs or they think X is prettier/popular. You don't hear nearly as much about people doing UX research as you do of people cranking out React things, and it would be extremely benevolent to assume developers do in fact do expensive, time consuming UX sessions w/ users. If we talk specifically about scrollbars, maybe a good litmus test is this: - if the default was no scrollbar whatsoever, would that be a problem for you? - if the default was a read-only scrollbar (e.g. it merely reports whereabouts in the page you are, but does not respond to mouse events), would that be a problem for you? If the answer to either of those is "no", you probably aren't actually using it. They could conceivably be configurations too, but why? Consider this hypothetical parallel: why not hide the "Help" menu item in apps? Personally, I don't use it and it would clean up the UI, so it must be fine, right? Well, not necessarily. Because if you bother to do UX sessions w/ users, you may find that people looking to use that specific feature will have expectations about where it should be.
- Cyberdog 7y ago
  I like macOS/iOS's hidden scrollbars personally, but I agree with you about not wanting pages to be able to override scrollbar behavior in any manner. The way my scrollbars work is perfectly fine and, more importantly, predictable, and I don't need web pages changing that on their creators' masturbatory whims. Too bad Google once again leads the way of being a prominent example of a bad idea with its custom scroll bars on many of its properties.
  - munchbunny 7y ago
    I agree with this, so based on the article I think that browsers should respect the Windows setting since it's an expression of the user's preferences. Other than that, I have a strong preference that webpages don't try to style the scrollbar (with exceptions when it really makes sense).
    - nordsieck 7y ago
      > I have a strong preference that webpages don't try to style the scrollbar (with exceptions when it really makes sense). That's the crux of the problem: the only time a website makes changes to the scrollbar is when the author thinks it makes sense. I just disagree all of the time.
      - Springtime 7y ago
        One site I've thought it made sense was in Discord, which acts as a properly themed web app and where the clash of certain native scrollbars would be jarring (eg: bright scrollbars on a dark theme). That said the scroll bar it uses for the user list is microscopic compared to the one used for the message log, which is a baffling decision. For every other regular site, and even most web apps, I always prefer native, for Windows.
    - marcosdumay 7y ago
      Well, no problem in making all those styling rules opt-in. When it really makes sense, you can choose to use the author's UI. Apply that for colors too. Applications should respect the DE settings for UI. Browsers are the main culprits here, but only because CAD software isn't widely used. Oh, and there's MS Office, that will respect absolutely nothing. All of those are in the wrong. But everywhere the DE is powerless to enforce its style onto applications, so this is a much harder problem to fix;
- LaGrange 7y ago
  Yeah, the unobtrusive scrollbars make sense only if you're using a multitouch touchpad or Apple's mouse — as soon as I have to use e.g. some office's basic mouse, chasing those unobtrusive becomes a major pain, to the point I wish Macs would switch to traditional scrollbars if I connect a "plain" mouse. Not that it matters: modern websites tend to completely break scrollbars.
- soulofmischief 7y ago
  But what about an SPA with potentially multiple scrollable areas? Sometimes a simple, sleek visual indicator makes for more readable UI.
  - discreditable 7y ago
    Multiple scrollable areas in a window is pretty annoying in my experience. Depending on what you last clicked on and where your cursor is can result in different areas being scrolled.
    - soulofmischief 7y ago
      That just depends on the implementation. I can think of plenty use cases for online applications which need multiple scrollbars. Sometimes you can't fit every element in one view.
      - pfranz 7y ago
        I don't see how that kind of SPA is any different than a heavy pro app. Those apps often come up with their own UI scheme that people either love or hate (and usually completely ignores system preferences). A few common examples (I specifically chose Apple to illustrate) are Aperture, Logic Pro, Final Cut Pro. You're already buying into the whole app and there's good reason to not like the design decisions they made. I also think many companies overvalue the need for it.
        soulofmischief 7y ago
        That's completely irrelevant. I can't imagine how ugly Blender or Photoshop's UI would become if they used my stock system scrollbars. What you're arguing over is merely a matter of preference. Some people can do it right, and pointing at the wrong examples is pointless.
        pfranz 7y ago
        But that's my point. It has a place in a very, very narrow number of applications. For those it's an all-in decision where the UI significantly changes and it's ignoring your operating system. Photoshop for most of its history used the OS' UI paradigms. Only in the past decade or so has it adopted its own. I'm pretty sure it used the OS' scroll bars at least until CS5 around 2010.
- NullPrefix 7y ago
  >I like to know a page's length This is not your concern, you should spend more time looking at the ads. /s
- pfranz 7y ago
  I completely agree. I'm questioning whether I'm curmudgeon for feeling this way, but the only time I notice scrolling customizations is when they mess up scrolling--which is surprisingly often and also seems intentional most of the time. I understand the motivation for controlling the experience, but I really think designers are undervaluing consistency. It feels like the car I drive every day acts different on one road. Sure, there's a very tiny chance it's an improvement if a lot of time and thought has been invested, but in all likelihood it's just very jarring.
- johnisgood 7y ago
  Most of the time the scrollbar is so damn narrow that sometimes I am having troubles positioning my cursor on it, seriously! It is hidden by default, AND narrow. I have difficulties making it appear and use it for scrolling. I move my cursor by one pixel, and it disappears again, sometimes I have to fsck around with it for way too long. Yeah, stop messing with my scrollbar.
- hinkley 7y ago
  I have some dev tools that do infinite scrolling and I wish I had the authors here to tell them how fucking stupid I think they are. If the page is long enough for infinite scrolling, I'm probably going to have a slightly error-prone recollection of the exact string of text I'm looking for. Taking search away from me makes this worse. There's a bit of psychology that says when someone is experiencing a strong emotion, good or bad, they will associate it with a person nearby, whether they deserve it or not. This has applications from espionage to team building to crisis management. One of the wrinkles of this is that if someone is already or almost experiencing a strong emotion and you add to it in any way, you've made yourself a target. One of the things I tell mentees about code and test quality (especially the latter) is that in the grand scheme of things, nobody (read: a tiny fraction) is going to look at your code for fun. They're going to look at it because something bad happened, near it or in it. Assume the person reading your code is already having a bad day. Don't make it worse. Especially if it ends up having nothing to do with you. The infinite scroll bozos, at least in the scope of productivity tools, are making my not-great day worse. The ones that 'fix' this by hijacking CTRL-F and do their own half-assed implementation of search are just doubling down. If you're going to listen on CTRL-F, maybe force-update the entire list instead?
  - SenHeng 7y ago
    Please name these tools, thank you.
    - hinkley 7y ago
      Atlassian for one. Their old code viewer was a disaster but that might have been Bitbucket’s fault. The repository list lazy loads, and if you’re at a big enough company the repositories get into multiple projects and it’s always disorganized. Which project is this repo in again? Time to hunt around and oh yeah CTRL-F doesn’t work unless you remember to scroll to the bottom repeatedly.
zamadatix 7y ago
Annoyingly on Chrome the flag to enable auto-hiding scrollbars on Windows is being deprecated and in Chrome Canary is already at the point you have to enable the flag to enable soon to be removed flags to even select it anymore. This seems to be moving in the opposite direction from how the platforms it runs on are evolving :/.
NegativeLatency 7y ago
Seems like a slippery slope. I’d never advise messing with a scroll bar on a web page.
pixelbath 7y ago
> For designers accustomed to Mac environments but designing multi-platform web experiences, trying to make everyone happy in a way that doesn’t place a lot of performance burden on the end user can be tricky. Or you could just leave things at their defaults and stop messing with native chrome and UI elements. Now that you've styled it "unobtrusively" for Windows, that's one UI element that's completely inconsistent with the rest of the OS, and for what purpose? Does a usable user interface element actually need to be a tiny capsule because that's what Apple does?
- simias 7y ago
  I agree with the sentiment but the web is so ridiculously inconsistent already that drawing the line to styling scrollbars feels pointless to me. This was your monthly "the web was a mistake, gopher should've won" propaganda message. You can now return to your 30MB React.js project.
  - jimktrains2 7y ago
    If gopher had a way to send a request with a body it could have done better, I think. You can't build a BBS/Forum with just gopher.
  - dmix 7y ago
    The question is about what’s consistent for the user not the application developer
    - deleted 7y ago
      [deleted]
    - tetraca 7y ago
      Gopher was arguably more consistent in both regards. But pretty vs functional wasn't even a tradeoff you could really consider.
      - dmix 7y ago
ChrisSD 7y ago
> On Windows 10, a similar preference exists in Settings → Display → Simplify and personalize Windows. Unfortunately even with this preference checked, it had no effect on scrollbar behavior in Firefox, Chrome, in Internet Explorer and Edge—whether Chromium or EdgeHTML based. So either this option isn't exposed to applications or browsers (including MS' own) aren't making use of it. Either way this is an issue that I'd like to see resolved.
- AnIdiotOnTheNet 7y ago
  There's another alternative: it's just broke. Considering how frequently Microsoft breaks its own OS while blundering around trying to implement the latest who-gives-a-shit anti-feature in time for their bi-annual in-place reinstall shitshow, it wouldn't be surprising.
- mr__y 7y ago
  >it isn't exposed to browsers well, I have a strong position that it should not be exposed to browser. Exposure of system settings/preferences should be minimized as this provides additional user-profiling opportunities.
  - ChrisSD 7y ago
    Exposed to the browser doesn't have to mean it's exposed to websites. The browser has access to all sorts of system settings that websites aren't allowed to view. Although admittedly it's hard to disguise scrollbar behaviour if it affects the page width.
ubu7737 7y ago
I recommend you just don't alter the user's scrollbar for your own taste preferences. Why does horizontal space matter on desktop anyway?
- IggleSniggle 7y ago
  Oh believe me, for the information dense designs I’m working from, and needing to support a baseline desktop resolution, every pixel matters! I would never want to take that out on someone’s scrollbars tho. Scrollbars are sacred.
  - homonculus1 7y ago
    >information dense designs All well and good for you but our author here is working with 40-50% whitespace anyway! Why the hell does he need to hide and minimize fundamental features to reclaim more fucking whitespace? Aaaaargh, designers are from a different species!
- Isamu 7y ago
  Yes, please stop. Changing the scrollbar is another unwanted overreach that ruins my user experience.
- ginko 7y ago
  >Why does horizontal space matter on desktop anyway? Because some people like to tile their screens into two halves.
  - wvenable 7y ago
    We had scroll bars when desktops where 640x480.
    - braythwayt 7y ago
      The very idea of scrollbars was popularized with a desktop that was 512x342!
firasd 7y ago
Seems like the Mac-based designers were a bit too fixated on the issue of scrollbar appearance and this tech team had to figure out a workaround. Speaking of web scrollbars: One of the many reasons I hate modal dialogs ('lightboxes') on webpages is that they mess up scrolling behavior. Sometimes they accidentally close themselves if you hit the scrollbar, sometimes something else happens... Interestingly in mobile web design, having a scrollable box inside a document doesn't really work that great (in fact I am typing this on HN on my phone and the fact that this text input is too small for my comment & scrollable makes it tricky to read and edit.) So this forces us to think about other ways to make boxes expandable. One solution I've used is showing eg. 40px of the box then a button to expand it in place in the page, where it can be browsed using the document scrolling behavior, instead of showing a 200px height box with its own scrollbar.)
kovek 7y ago
Sounds like this might have to be considered at the level of the OS binaries or the browser binaries instead of the level of HTML/CSS.
IE6 7y ago
As a desktop user of Firefox on Linux I found the two demos with the modified scrollbars subjectively worse than default. As a user I use the scroll bar to (1) identify if a section can be scrolled, (2) identify where in the section I am with regards to the scroll height, and if needed (3) manually scroll by clicking on the scroll bar and dragging with the mouse. The two demos retain these three capabilities but for me make them more difficult and less efficient. I agree with what other users have said: please do not touch my scrollbars.
jandrese 7y ago
This article seems to make the assumption that the scrollbar has no value unless you are actively scrolling, but that's not the case for me. It's an important indicator that there is content left to scroll and also how far along you are in a document. I'm also not sure I like the idea of "we will make them super small and hard to use" because on my desktop I have enough screen real estate to handle losing a few pixels to the scrollbar. It's not like I'm on an old phone and every pixel is sacred.
- AnIdiotOnTheNet 7y ago
  Not to mention how much space is already completely blank on the sides of most websites because they've constrained all the content to a narrow band in the center.
- xyzzy_plugh 7y ago
  I feel like I'm the only user on the planet who still uses "click to scroll" regularly. If I'm reading a thousand-page document, navigating by incrementally scrolling up or down is painfully slow, and using home/end key functionality requires reaching for the keyboard (and possibly using keyboard shortcuts on a laptop) and still doesn't allow me to instantly jump to the middle of the page, for example. The fact that this is also not the OS default (clicking usually _incrementally_ scrolls towards where you click, instead of jumping) is infuriating.
  - staktrace 7y ago
    In Firefox you can ctrl+click or shift+click the scroll track to switch between incremental and absolute scroll behaviour. Maybe not all OSes though.
    - lnl 7y ago
      Not just Firefox, all programs in Windows 10 allow shift+click to jump. The only exceptions are new UWP style scrollbars (the ones that are affected by the "Automatically hide scrollbars in Windows" setting). Fortunately I don't use any of those, other than start menu and settings. Interestingly (as mentioned in the article) EdgeHTML based Edge is not one of them, scrollbar is always visible regardless, and shift+click works.
YeahSureWhyNot 7y ago
for a second I thought its /r/jokes
otras 7y ago
> Obtrusive scrollbars: scrollbars that take up screen real estate. These do not overlay on top of the content, but appear next to it. > Unobtrusive scrollbars: scrollbars that sit on top of the content. These don’t subtract screen real estate away from the container they belong to. I work mostly on the front end, and I recently ran into a bug where a scrollbar would alternate between these two behaviors depending on screen width, the page's CSS, and when the DOM was redrawn. I'm generally interested in moving away from FE work, and I must admit that part of it is to increase the distance between me and scrollbars.
rvanmil 7y ago
If you want me to instantly close your website/app, then sure, go ahead and mess with my scrollbar.
dec0dedab0de 7y ago
I like obtrusive scrollbars that the browser provides. As well as toolbars and full menus, and separate search and address bars, and address bars that actually have the full address in them, and status bar that tells me a useful status. Most importantly none of those elements should be able to be affected by the site im visiting. If modern UI designers were making a car they would replace the fuel gauge with just the light saying you need gas, the RPMs would be gone completely, and the speedometer would just say to hurry up or slow down.
zwaps 7y ago
Yes pleeease load some more megabytes of CSS and JS garbage such that the scrollbar is as tiny as possible, and most likely janky and laggy on anything but top-end machines. And when your code invariable fails to load, because of interrupts or unavailability, there's no scrolling at all. And people without perfect eyesight or older folks can't use the side at all. Thank you front-end designers for your continuing efforts to ruin everything good about the internet. No tech group has collectively produced so much garbage in the last decade!
Someone 7y ago
”let’s get a few definitions out of the way: Obtrusive scrollbars…” That’s where the error is made. https://www.merriam-webster.com/dictionary/obtrusive https://www.merriam-webster.com/dictionary/obtrusive lists two meanings for “obtrusive”, both with a negative connotation. Especially given the sizes of today’s desktop monitors and their ability to use various grays and low key colors to draw items, there’s nothing “undesirably prominent” about permanently showing user controls. In fact, there’s a case to be made to show more controls. That’s why we got tool bars, and why Microsoft turbo-charged it to the ribbon.
- smacktoward 7y ago
  My rule is, whenever I find myself putting things into categories with names that are judgemental/subjective, that's usually a sign that my thinking on the subject is flawed somehow. Calling them "obtrusive" and "unobtrusive" scrollbars is just another way to call them "bad" and "good" scrollbars; it says more about the biases of the author than it does about the scrollbars themselves.
  - hyperdimension 7y ago
    That's an insightful comment and a good (IMO) way of slowing down the outrage train, if only by a tiny bit. Thanks.
- Someone 7y ago
  Reply to self: many programs have realized this, too, and added _enormous_ scroll bars, in the form of a “Show Thumbnails” feature (examples: MS Word and PowerPoint, Mac OS Preview and Pages) or as a “minimap” (https://en.wikipedia.org/wiki/Mini-map#Code_Minimap_in_Text_editors_and_IDEs https://en.wikipedia.org/wiki/Mini-map#Code_Minimap_in_Text_...) Say NO to sneaky scroll bars!
jeroenhd 7y ago
"How to change the scrollbar style", or, as I would like to call it, "it's more important that my site looks pretty than that it's usable". Yes, if you come from MacOS, the scrollbars seem obtrusive. When you come from Windows, the entire layout of Finder looks weird as hell as well. It's what people are used to. For anyone who wants to disable scrollbar fuckery in Firefox, you can toggle these settings in about:config - layout.css.scrollbar-color.enabled - layout.css.scrollbar-width.enabled
- iaml 7y ago
  How is finder's UI related to scrollbars?
  - murermader 7y ago
    He was just making a point, that stuff kinda feels weird when you are not used to it, not that finders UI is weird.
  - jeroenhd 7y ago
    It's an example of UI design conflicting with your expectations as a user are about how things should look and work.
hadrien01 7y ago
On Windows+Firefox the scrollbar is too thin to be used with a mouse.
vezycash 7y ago
Obtrusive = useful, works as intended but it's offensive to design guys so lets swap it for an unobtrusive one. Unobtrusive = beautiful, thin, glossy, glassy, & invisible but using it feels like lottery, or whackamole. You'll also need steady hands like a surgeon or a advanced robot to use cos its just too tiny for mouse, much less finger control. So, instead of drag-scroll, people end up tapping the scroll bar to jump around the page. But that's not all. The user gets tired and taps the backspace button. Alas, instead of moving back, it goes to a different page because the all knowing designer messed with that too. After a few confused back/forward presses, the user closes the tab or the browser, if the designer messed with the tab closing process. But it's all right cos user engagement has improved!
- ndidi 7y ago
  The backspace button no longer works to go back, you need to press alt+backspace
  - vezycash 7y ago
    That's chrome only. However, the history jacking applies even if you use the browser's back button.
- marcosdumay 7y ago
  > Alas, instead of moving back, it goes to a different page because the all knowing designer messed with that too. Well, that (all that incredibly important) bounce rate won't go down by itself!
oauea 7y ago
I really wish browsers wouldn't let websites mess with the scrollbar style, or any of the chrome. This entire post is ridiculous.
chooseaname 7y ago
Do not hijack my scrollbars or my back button. You do you get kicked in the nuts (if we ever meet). (I'm not actually condoning violence, just giving an example of how annoying you are for frustrating me)
homonculus1 7y ago
>Minimize the real estate that a scrollbar can occupy. Windows scrollbars are obtrusive and very wide by default. Wide scrollbars are a blessing. Better to lose a couple pixels, a fraction of a percent of screen space, than have to constantly line up your cursor over a tiny, yet essential and frequently-used UI tool. I can't stand those dainty little ovals on Mac OS, it's like having to constantly slow down whatever I'm trying to do to thread a needle. It blows my mind that everyone is constantly trying to throw away effortlessly responsive function for such stupidly picky details of form, according to an arbitrary standard of pure aesthetics. Scrollbars should always remain visible and wide.
dehrmann 7y ago
> Moreover, touch devices have popularized hiding the scrollbar, making it invisible until an overflowing element is scrolled, trading design aesthetics for confusion on containers that don’t appear to be overflowing/scrollable at all. Not a touch device, but I couldn't find a file in Finder because it was off-window and the window had no scroll bars, implying I'm seeing everything.
petepete 7y ago
If you design web sites and feel the need to fuck your users over like this, you need to straighten your priorities. As someone who creates accessible sites for a living, this wouldn't fly.
braythwayt 7y ago
"Any sufficiently complicated web application contains an ad-hoc, informally-specified, bug-ridden, slow implementation of half of the browser's native behaviour." To which I would add the adjectives outdated and brittle. It is possible, with care, to replicate almost any UX behaviour that is native to the browser or its underlying platform, but: 1. When the browser or platform changes, the "greenspunned" behaviour does not keep up, so you are either stuck with outdated behaviour, or you have to go back and update your web app to keep up. 2. Most of the high-fidelity implementations rely on a tottering jenga pile of hacks and workarounds that break in unpredictable ways when changes are made to the site's appearance (e.g. a rebranding exercise) or to the browser's underlying behaviour. I've become very conservative about doing anything like this myself. I have extreme difficulty coming up with business justification for reïmplementing standard behaviour. It is not my job to make scroll bars, buttons that depress when you mouse down, and especially, custom text input fields that—thanks to my meddling—don't support standard behaviour like native spell checking, copy and paste. Now please excuse me, I've lined up a row of Geritol and Jack Daniel's ("Gerry & Jack's") shots, and it's time for a drink.
duxup 7y ago
As a webdev (albeit a noob) I just leave the scroll bar to its own devices with ONE EXCEPTION. I hate the "pop" you get when the scroll bar isn't there, and then suddenly there is enough content to scroll and the scroll bar shifts everything to the left. It's not easy to account for for a given page when that may or may not occur when say you show some new content and then suddenly things shift left. It's a pain visually so I just force it to appear regardless. I've had luck with: overflow-y:scroll;
ggg3 7y ago
if you use firefox on android, about:config has a "scrollbar timeout" setting that you can set to 0 or -1... now you will have an always visible scrollbar. you must force close firefox before it takes effect.
XJ6 7y ago
I checked out the demo, it turns out this is for something reminiscent of frames rather than the main scrollbar. Just stop, don't have internal or nested scrollbars at all. Having part of the page scroll independently of the rest is a usability nightmare anyway, especially when you consider how it interacts with zooming.
eitland 7y ago
Nice example of something I wrote about yesterday: perfect ux is impossible: https://erik.itland.no/perfect-ux-is-impossible https://erik.itland.no/perfect-ux-is-impossible (It started as a rant but I have tried to clean it up a bit.) And yes, agree with the majority here: leave my scrollbars alone, if I want a Mac I can ask my boss to get one for me.
chias 7y ago
While the content is interesting, by far the most useful thing I learned from this article is that you can turn off unobtrusive scrollbars on a mac. I have to use one at work, and turning off this feature makes me hate my computer less by a significant amount :)
mehrdadn 7y ago
These articles make me feel like I'm the only person on Earth who's never had a problem with my scrollbars. Do they have to fix things that aren't broken for people?
Narretz 7y ago
I think the proposal for scrollbar-width:thin is good enough for cases where you have a secondary scrollable area in your site or application. Styles beyond that will just become too confusing.
jedberg 7y ago
Something I noticed the other day. If you watch the credits for Ralph Breaks the Internet, it has a scroll bar on the right that accurately reflects the current position in relation to the entire credit roll. It was quite useful!
larrik 7y ago
> Obtrusive scrollbars: scrollbars that take up screen real estate. These do not overlay on top of the content, but appear next to it. > Unobtrusive scrollbars: scrollbars that sit on top of the content. These don’t subtract screen real estate away from the container they belong to. See, I would call "scrollbars covering content" to be obtrusive and "scrollbars outside of the content area" to be unobtrusive... The main scroll bar in my browser should be completely off limits, and treated as part of the browser and not the page. Divs inside the page with their own scrollbars are another matter, but even then...
alxlaz 7y ago
> For designers accustomed to Mac environments but designing multi-platform web experiences, trying to make everyone happy in a way that doesn’t place a lot of performance burden on the end user can be tricky. Well here's a recipe that, since the dawn of the GUI more than 30 years ago, has guaranteed the success of this endeavour: don't override anything that's provided by the platform. It's extremely easy to do in a web page, it requires absolutely no coding whatsoever. You don't need to do anything, and the result looks exactly as each users expects on their platform. It also places no performance burden. And it's guaranteed to make everyone happy -- except for people who are already unhappy with their platform, which you can't really help anyway. Can we please, please, PLEASE put an end to this endless, user-hostile masquerade? > Minimize the real estate that a scrollbar can occupy. Windows scrollbars are obtrusive and very wide by default. Wide and obtrusive? I'm not twenty anymore and my eyes definitely don't work as well as when I was twenty. I find them not wide at all, and definitely not obtrusive. So do many people my age or older. You know what sucks? Thin, subtly-colored, automatically-hidden scrollbars that obscure how much is left from the current page, are hard to see when they do pop up, are hard to find and click (you don't know where the scrollbar is going to pop up when you move your mouse to the edge of the window). * Points finger at GTK and shudders * > Respect changes to user preferences. If a user has selected non-default options for scrollbar behavior, respect those preferences when possible. Why "when possible"? Why not all the time? If a user has gone through the trouble of configuring a non-default setting for the scrollbars, an UI element that's taken for granted to the extent that many computer users don't even know its name, does anyone honestly think it's a good idea to override these settings sometimes? Why? What kind of information do you think you could present for the user, were it not for that pesky scrollbar?
- phponpcp 7y ago
  The point that they didn't raise is that scrollbars effect the size and position of things in the browser. Try setting 100vw on an element when you have obtrusive scrollbars, the result will be a page which now has horizontal scrolling, leading to terrible UX.
  - chrismorgan 7y ago
Andrzejko29 7y ago
Wow
rvlpr 7y ago
just use width:100vw on body and voila Unobtrusive
mixmastamyk 7y ago
No one has surpassed the SGI scrollbars from ancient times. When you moved it, it left an indent of where you were so you could go back easily or compare two pages. Also could middle click to go directly instead of page. That’s still available on some floss desktops but gnome broke that at some point. Still works under mate.
Sir_Cmpwn 7y ago
This was interesting until he started mentioning CSS, then it was no no no no no through the end of the article. Do not mess with scrollbars. In the same class of annoying bullshit: don't mess with text boxes with JavaScript. You won't get it right, there's so many little interactions the system text boxes can do that yours won't and it'll throw a massive wrench into things when I can't use yours the way I'm used to. The same applies to JavaScript for smooth scrolling. There's a browser preference, turn it off for yourself and then keep your nose out of my web browser. The "know-better" attitude of some web devs is terrible.
Endy 7y ago
You can have my scrollbar when you pull it from my cold, dead, GUI. If I don't have a scrollbar visible (with or without cursor), I'd better be in console.
rhplus 7y ago
> The scrollbar is under attack. Scrolljacking hijacks the default scrolling behavior, breaking the implied contract between document length and scrollbar height. … ...so here's how we hijacked system-provided scrollbars to fit our needs.
laufj 7y ago
The iOs hidden scrollbar is a pain. As a web developer, it caused issues because Safari will reflow the content when the scroll bars appear and disappear since the amount of space they take up changes.
notananthem 7y ago
Mac scrollbars are terrible for accessibility. They're way too small, larger scrollbars help users with dexterity/mobility disabilities. I like the windows behavior because for me its reliable, I know where it "is," and yeah I object to "scrolljacking."
notananthem 7y ago
I feel like a lot of these things are "I'm a mac-based designer and the world is moving away from mac-based design so change the world"
dredmorbius 7y ago
All These Elements Are Yours, Except Scrollbars. Attempt No CSS Styling There. Use Them Together. Use Them in Meaning. https://mastodon.cloud/@dredmorbius/102742105247305430 https://mastodon.cloud/@dredmorbius/102742105247305430
hexo 7y ago
After trying the demo and comparing those two implementations I came to conclusion that I really like standard system scrollbars waaay more. Thanks for respecting my own settings and please don't style scrollbars.

193 points by robin_reala 7y ago

This is probably only interesting for web developers. Maybe a sub-hackernews would make hacker news better? Wait... that's old.reddit.com.

saagarjha 7y ago
I’m not a web developer and I found it interesting enough to read.

jvzr 7y ago

I am of the opinion that you should not mess with my scrollbars. I like them to be visible and wide, because (a) I like to know a page's length and my current progress, and (b) I'm a bit blind and I don't want to hunt for an 'unobtrusive' scrollbar. There are options at the system level, I find it great that most browsers follow them and sites cannot willy-nilly change them without my consent.

zamadatix 7y ago
The article covers these points in great detail and spends significant time avoiding exactly what you describe with it's final workaround.
- jvzr 7y ago
  I know, I read it. But it doesn't work like it says it does. I have Firefox with Windows 10, and the final result ('only styles obtrusive scrollbars') is way too unobtrusive for my tastes. It sorts of look like the Windows 10 scrollbars, but is 1/5th or one quarter the size of a regular scrollbar, and is hidden among the background of the page. Not what I prefer, and what I set up in my OS settings.
- lhorie 7y ago
  The core problem, as I see it, is of someone else deciding that "unobtrusive" scrollbars are better. On a mac, to actually grab the scroller for scrubbing, you need to scroll a bit to make it visible and then manage to bring your cursor into a tiny area using the trackpad within a few seconds before the scroller disappears. If you miss, clicking activates window resizing. UIs need to be functional first. Being pretty should never trump being functional.
  - IggleSniggle 7y ago
    On a Mac, this is configurable. The article talks about this, and about respecting user configuration when possible.
    - lhorie 7y ago
      > configurable I mean, if I write an app and hide a "dysfunctional prettiness [Y/n]" configuration somewhere in settings, is that a good thing? I'd argue there are at least two better options that are trivial to implement, and surely more if one cares to do UX due diligence when trying some novel design.
      - mikestew 7y ago
        I'd argue there are at least two better options... Wasn't your original complaint that someone decided what was "better"? Or are you complaining that they didn't take your choice? Point being that someone that decided otherwise thought they had a good reason for their decision, too. In this case, it could be argued that trackpads reduce the need for the scrollbars. (I have no idea what the real argument for such UI behavior is.)
        lhorie 7y ago
        I'm talking in generalities. The status quo used to be "scrollbars are visible things". If you're going to change the status quo, it behooves avoiding a dark pattern (like e.g. privacy settings turned off by default). The two better options for UX changes (generally) are to leave it alone, or to create a configuration that defaults to the old way of doing things. You probably heard again and again of some random company doing some major redesign with good intentions and ending up pissing off users. In my experience, the backdrop in many of those cases is that UX changes get rolled out because people need to justify their jobs or they think X is prettier/popular. You don't hear nearly as much about people doing UX research as you do of people cranking out React things, and it would be extremely benevolent to assume developers do in fact do expensive, time consuming UX sessions w/ users. If we talk specifically about scrollbars, maybe a good litmus test is this: - if the default was no scrollbar whatsoever, would that be a problem for you? - if the default was a read-only scrollbar (e.g. it merely reports whereabouts in the page you are, but does not respond to mouse events), would that be a problem for you? If the answer to either of those is "no", you probably aren't actually using it. They could conceivably be configurations too, but why? Consider this hypothetical parallel: why not hide the "Help" menu item in apps? Personally, I don't use it and it would clean up the UI, so it must be fine, right? Well, not necessarily. Because if you bother to do UX sessions w/ users, you may find that people looking to use that specific feature will have expectations about where it should be.
Cyberdog 7y ago
I like macOS/iOS's hidden scrollbars personally, but I agree with you about not wanting pages to be able to override scrollbar behavior in any manner. The way my scrollbars work is perfectly fine and, more importantly, predictable, and I don't need web pages changing that on their creators' masturbatory whims. Too bad Google once again leads the way of being a prominent example of a bad idea with its custom scroll bars on many of its properties.
- munchbunny 7y ago
  I agree with this, so based on the article I think that browsers should respect the Windows setting since it's an expression of the user's preferences. Other than that, I have a strong preference that webpages don't try to style the scrollbar (with exceptions when it really makes sense).
  - nordsieck 7y ago
    > I have a strong preference that webpages don't try to style the scrollbar (with exceptions when it really makes sense). That's the crux of the problem: the only time a website makes changes to the scrollbar is when the author thinks it makes sense. I just disagree all of the time.
    - Springtime 7y ago
      One site I've thought it made sense was in Discord, which acts as a properly themed web app and where the clash of certain native scrollbars would be jarring (eg: bright scrollbars on a dark theme). That said the scroll bar it uses for the user list is microscopic compared to the one used for the message log, which is a baffling decision. For every other regular site, and even most web apps, I always prefer native, for Windows.
  - marcosdumay 7y ago
    Well, no problem in making all those styling rules opt-in. When it really makes sense, you can choose to use the author's UI. Apply that for colors too. Applications should respect the DE settings for UI. Browsers are the main culprits here, but only because CAD software isn't widely used. Oh, and there's MS Office, that will respect absolutely nothing. All of those are in the wrong. But everywhere the DE is powerless to enforce its style onto applications, so this is a much harder problem to fix;
LaGrange 7y ago
Yeah, the unobtrusive scrollbars make sense only if you're using a multitouch touchpad or Apple's mouse — as soon as I have to use e.g. some office's basic mouse, chasing those unobtrusive becomes a major pain, to the point I wish Macs would switch to traditional scrollbars if I connect a "plain" mouse. Not that it matters: modern websites tend to completely break scrollbars.
soulofmischief 7y ago
But what about an SPA with potentially multiple scrollable areas? Sometimes a simple, sleek visual indicator makes for more readable UI.
- discreditable 7y ago
  Multiple scrollable areas in a window is pretty annoying in my experience. Depending on what you last clicked on and where your cursor is can result in different areas being scrolled.
  - soulofmischief 7y ago
    That just depends on the implementation. I can think of plenty use cases for online applications which need multiple scrollbars. Sometimes you can't fit every element in one view.
    - pfranz 7y ago
      I don't see how that kind of SPA is any different than a heavy pro app. Those apps often come up with their own UI scheme that people either love or hate (and usually completely ignores system preferences). A few common examples (I specifically chose Apple to illustrate) are Aperture, Logic Pro, Final Cut Pro. You're already buying into the whole app and there's good reason to not like the design decisions they made. I also think many companies overvalue the need for it.
      - soulofmischief 7y ago
        That's completely irrelevant. I can't imagine how ugly Blender or Photoshop's UI would become if they used my stock system scrollbars. What you're arguing over is merely a matter of preference. Some people can do it right, and pointing at the wrong examples is pointless.
        pfranz 7y ago
        But that's my point. It has a place in a very, very narrow number of applications. For those it's an all-in decision where the UI significantly changes and it's ignoring your operating system. Photoshop for most of its history used the OS' UI paradigms. Only in the past decade or so has it adopted its own. I'm pretty sure it used the OS' scroll bars at least until CS5 around 2010.
NullPrefix 7y ago
>I like to know a page's length This is not your concern, you should spend more time looking at the ads. /s
pfranz 7y ago
I completely agree. I'm questioning whether I'm curmudgeon for feeling this way, but the only time I notice scrolling customizations is when they mess up scrolling--which is surprisingly often and also seems intentional most of the time. I understand the motivation for controlling the experience, but I really think designers are undervaluing consistency. It feels like the car I drive every day acts different on one road. Sure, there's a very tiny chance it's an improvement if a lot of time and thought has been invested, but in all likelihood it's just very jarring.
johnisgood 7y ago
Most of the time the scrollbar is so damn narrow that sometimes I am having troubles positioning my cursor on it, seriously! It is hidden by default, AND narrow. I have difficulties making it appear and use it for scrolling. I move my cursor by one pixel, and it disappears again, sometimes I have to fsck around with it for way too long. Yeah, stop messing with my scrollbar.
hinkley 7y ago
I have some dev tools that do infinite scrolling and I wish I had the authors here to tell them how fucking stupid I think they are. If the page is long enough for infinite scrolling, I'm probably going to have a slightly error-prone recollection of the exact string of text I'm looking for. Taking search away from me makes this worse. There's a bit of psychology that says when someone is experiencing a strong emotion, good or bad, they will associate it with a person nearby, whether they deserve it or not. This has applications from espionage to team building to crisis management. One of the wrinkles of this is that if someone is already or almost experiencing a strong emotion and you add to it in any way, you've made yourself a target. One of the things I tell mentees about code and test quality (especially the latter) is that in the grand scheme of things, nobody (read: a tiny fraction) is going to look at your code for fun. They're going to look at it because something bad happened, near it or in it. Assume the person reading your code is already having a bad day. Don't make it worse. Especially if it ends up having nothing to do with you. The infinite scroll bozos, at least in the scope of productivity tools, are making my not-great day worse. The ones that 'fix' this by hijacking CTRL-F and do their own half-assed implementation of search are just doubling down. If you're going to listen on CTRL-F, maybe force-update the entire list instead?
- SenHeng 7y ago
  Please name these tools, thank you.
  - hinkley 7y ago
    Atlassian for one. Their old code viewer was a disaster but that might have been Bitbucket’s fault. The repository list lazy loads, and if you’re at a big enough company the repositories get into multiple projects and it’s always disorganized. Which project is this repo in again? Time to hunt around and oh yeah CTRL-F doesn’t work unless you remember to scroll to the bottom repeatedly.

zamadatix 7y ago

Annoyingly on Chrome the flag to enable auto-hiding scrollbars on Windows is being deprecated and in Chrome Canary is already at the point you have to enable the flag to enable soon to be removed flags to even select it anymore. This seems to be moving in the opposite direction from how the platforms it runs on are evolving :/.

NegativeLatency 7y ago

Seems like a slippery slope. I’d never advise messing with a scroll bar on a web page.

pixelbath 7y ago

> For designers accustomed to Mac environments but designing multi-platform web experiences, trying to make everyone happy in a way that doesn’t place a lot of performance burden on the end user can be tricky. Or you could just leave things at their defaults and stop messing with native chrome and UI elements. Now that you've styled it "unobtrusively" for Windows, that's one UI element that's completely inconsistent with the rest of the OS, and for what purpose? Does a usable user interface element actually need to be a tiny capsule because that's what Apple does?

simias 7y ago
I agree with the sentiment but the web is so ridiculously inconsistent already that drawing the line to styling scrollbars feels pointless to me. This was your monthly "the web was a mistake, gopher should've won" propaganda message. You can now return to your 30MB React.js project.
- jimktrains2 7y ago
  If gopher had a way to send a request with a body it could have done better, I think. You can't build a BBS/Forum with just gopher.
- dmix 7y ago
  The question is about what’s consistent for the user not the application developer
  - deleted 7y ago
    [deleted]
  - tetraca 7y ago
    Gopher was arguably more consistent in both regards. But pretty vs functional wasn't even a tradeoff you could really consider.
    - dmix 7y ago

ChrisSD 7y ago

> On Windows 10, a similar preference exists in Settings → Display → Simplify and personalize Windows. Unfortunately even with this preference checked, it had no effect on scrollbar behavior in Firefox, Chrome, in Internet Explorer and Edge—whether Chromium or EdgeHTML based. So either this option isn't exposed to applications or browsers (including MS' own) aren't making use of it. Either way this is an issue that I'd like to see resolved.

AnIdiotOnTheNet 7y ago
There's another alternative: it's just broke. Considering how frequently Microsoft breaks its own OS while blundering around trying to implement the latest who-gives-a-shit anti-feature in time for their bi-annual in-place reinstall shitshow, it wouldn't be surprising.
mr__y 7y ago
>it isn't exposed to browsers well, I have a strong position that it should not be exposed to browser. Exposure of system settings/preferences should be minimized as this provides additional user-profiling opportunities.
- ChrisSD 7y ago
  Exposed to the browser doesn't have to mean it's exposed to websites. The browser has access to all sorts of system settings that websites aren't allowed to view. Although admittedly it's hard to disguise scrollbar behaviour if it affects the page width.

ubu7737 7y ago

I recommend you just don't alter the user's scrollbar for your own taste preferences. Why does horizontal space matter on desktop anyway?

IggleSniggle 7y ago
Oh believe me, for the information dense designs I’m working from, and needing to support a baseline desktop resolution, every pixel matters! I would never want to take that out on someone’s scrollbars tho. Scrollbars are sacred.
- homonculus1 7y ago
  >information dense designs All well and good for you but our author here is working with 40-50% whitespace anyway! Why the hell does he need to hide and minimize fundamental features to reclaim more fucking whitespace? Aaaaargh, designers are from a different species!
Isamu 7y ago
Yes, please stop. Changing the scrollbar is another unwanted overreach that ruins my user experience.
ginko 7y ago
>Why does horizontal space matter on desktop anyway? Because some people like to tile their screens into two halves.
- wvenable 7y ago
  We had scroll bars when desktops where 640x480.
  - braythwayt 7y ago
    The very idea of scrollbars was popularized with a desktop that was 512x342!

firasd 7y ago

Seems like the Mac-based designers were a bit too fixated on the issue of scrollbar appearance and this tech team had to figure out a workaround. Speaking of web scrollbars: One of the many reasons I hate modal dialogs ('lightboxes') on webpages is that they mess up scrolling behavior. Sometimes they accidentally close themselves if you hit the scrollbar, sometimes something else happens... Interestingly in mobile web design, having a scrollable box inside a document doesn't really work that great (in fact I am typing this on HN on my phone and the fact that this text input is too small for my comment & scrollable makes it tricky to read and edit.) So this forces us to think about other ways to make boxes expandable. One solution I've used is showing eg. 40px of the box then a button to expand it in place in the page, where it can be browsed using the document scrolling behavior, instead of showing a 200px height box with its own scrollbar.)

kovek 7y ago

Sounds like this might have to be considered at the level of the OS binaries or the browser binaries instead of the level of HTML/CSS.

IE6 7y ago

As a desktop user of Firefox on Linux I found the two demos with the modified scrollbars subjectively worse than default. As a user I use the scroll bar to (1) identify if a section can be scrolled, (2) identify where in the section I am with regards to the scroll height, and if needed (3) manually scroll by clicking on the scroll bar and dragging with the mouse. The two demos retain these three capabilities but for me make them more difficult and less efficient. I agree with what other users have said: please do not touch my scrollbars.

jandrese 7y ago

This article seems to make the assumption that the scrollbar has no value unless you are actively scrolling, but that's not the case for me. It's an important indicator that there is content left to scroll and also how far along you are in a document. I'm also not sure I like the idea of "we will make them super small and hard to use" because on my desktop I have enough screen real estate to handle losing a few pixels to the scrollbar. It's not like I'm on an old phone and every pixel is sacred.

AnIdiotOnTheNet 7y ago
Not to mention how much space is already completely blank on the sides of most websites because they've constrained all the content to a narrow band in the center.
xyzzy_plugh 7y ago
I feel like I'm the only user on the planet who still uses "click to scroll" regularly. If I'm reading a thousand-page document, navigating by incrementally scrolling up or down is painfully slow, and using home/end key functionality requires reaching for the keyboard (and possibly using keyboard shortcuts on a laptop) and still doesn't allow me to instantly jump to the middle of the page, for example. The fact that this is also not the OS default (clicking usually _incrementally_ scrolls towards where you click, instead of jumping) is infuriating.
- staktrace 7y ago
  In Firefox you can ctrl+click or shift+click the scroll track to switch between incremental and absolute scroll behaviour. Maybe not all OSes though.
  - lnl 7y ago
    Not just Firefox, all programs in Windows 10 allow shift+click to jump. The only exceptions are new UWP style scrollbars (the ones that are affected by the "Automatically hide scrollbars in Windows" setting). Fortunately I don't use any of those, other than start menu and settings. Interestingly (as mentioned in the article) EdgeHTML based Edge is not one of them, scrollbar is always visible regardless, and shift+click works.

YeahSureWhyNot 7y ago

for a second I thought its /r/jokes

otras 7y ago

> Obtrusive scrollbars: scrollbars that take up screen real estate. These do not overlay on top of the content, but appear next to it. > Unobtrusive scrollbars: scrollbars that sit on top of the content. These don’t subtract screen real estate away from the container they belong to. I work mostly on the front end, and I recently ran into a bug where a scrollbar would alternate between these two behaviors depending on screen width, the page's CSS, and when the DOM was redrawn. I'm generally interested in moving away from FE work, and I must admit that part of it is to increase the distance between me and scrollbars.

rvanmil 7y ago

If you want me to instantly close your website/app, then sure, go ahead and mess with my scrollbar.

dec0dedab0de 7y ago

I like obtrusive scrollbars that the browser provides. As well as toolbars and full menus, and separate search and address bars, and address bars that actually have the full address in them, and status bar that tells me a useful status. Most importantly none of those elements should be able to be affected by the site im visiting. If modern UI designers were making a car they would replace the fuel gauge with just the light saying you need gas, the RPMs would be gone completely, and the speedometer would just say to hurry up or slow down.

zwaps 7y ago

Yes pleeease load some more megabytes of CSS and JS garbage such that the scrollbar is as tiny as possible, and most likely janky and laggy on anything but top-end machines. And when your code invariable fails to load, because of interrupts or unavailability, there's no scrolling at all. And people without perfect eyesight or older folks can't use the side at all. Thank you front-end designers for your continuing efforts to ruin everything good about the internet. No tech group has collectively produced so much garbage in the last decade!

Someone 7y ago

”let’s get a few definitions out of the way: Obtrusive scrollbars…” That’s where the error is made. https://www.merriam-webster.com/dictionary/obtrusive https://www.merriam-webster.com/dictionary/obtrusive lists two meanings for “obtrusive”, both with a negative connotation. Especially given the sizes of today’s desktop monitors and their ability to use various grays and low key colors to draw items, there’s nothing “undesirably prominent” about permanently showing user controls. In fact, there’s a case to be made to show more controls. That’s why we got tool bars, and why Microsoft turbo-charged it to the ribbon.

smacktoward 7y ago
My rule is, whenever I find myself putting things into categories with names that are judgemental/subjective, that's usually a sign that my thinking on the subject is flawed somehow. Calling them "obtrusive" and "unobtrusive" scrollbars is just another way to call them "bad" and "good" scrollbars; it says more about the biases of the author than it does about the scrollbars themselves.
- hyperdimension 7y ago
  That's an insightful comment and a good (IMO) way of slowing down the outrage train, if only by a tiny bit. Thanks.
Someone 7y ago
Reply to self: many programs have realized this, too, and added _enormous_ scroll bars, in the form of a “Show Thumbnails” feature (examples: MS Word and PowerPoint, Mac OS Preview and Pages) or as a “minimap” (https://en.wikipedia.org/wiki/Mini-map#Code_Minimap_in_Text_editors_and_IDEs https://en.wikipedia.org/wiki/Mini-map#Code_Minimap_in_Text_...) Say NO to sneaky scroll bars!

jeroenhd 7y ago

"How to change the scrollbar style", or, as I would like to call it, "it's more important that my site looks pretty than that it's usable". Yes, if you come from MacOS, the scrollbars seem obtrusive. When you come from Windows, the entire layout of Finder looks weird as hell as well. It's what people are used to. For anyone who wants to disable scrollbar fuckery in Firefox, you can toggle these settings in about:config - layout.css.scrollbar-color.enabled - layout.css.scrollbar-width.enabled

iaml 7y ago
How is finder's UI related to scrollbars?
- murermader 7y ago
  He was just making a point, that stuff kinda feels weird when you are not used to it, not that finders UI is weird.
- jeroenhd 7y ago
  It's an example of UI design conflicting with your expectations as a user are about how things should look and work.

hadrien01 7y ago

On Windows+Firefox the scrollbar is too thin to be used with a mouse.

vezycash 7y ago

Obtrusive = useful, works as intended but it's offensive to design guys so lets swap it for an unobtrusive one. Unobtrusive = beautiful, thin, glossy, glassy, & invisible but using it feels like lottery, or whackamole. You'll also need steady hands like a surgeon or a advanced robot to use cos its just too tiny for mouse, much less finger control. So, instead of drag-scroll, people end up tapping the scroll bar to jump around the page. But that's not all. The user gets tired and taps the backspace button. Alas, instead of moving back, it goes to a different page because the all knowing designer messed with that too. After a few confused back/forward presses, the user closes the tab or the browser, if the designer messed with the tab closing process. But it's all right cos user engagement has improved!

ndidi 7y ago
The backspace button no longer works to go back, you need to press alt+backspace
- vezycash 7y ago
  That's chrome only. However, the history jacking applies even if you use the browser's back button.
marcosdumay 7y ago
> Alas, instead of moving back, it goes to a different page because the all knowing designer messed with that too. Well, that (all that incredibly important) bounce rate won't go down by itself!

oauea 7y ago

I really wish browsers wouldn't let websites mess with the scrollbar style, or any of the chrome. This entire post is ridiculous.

chooseaname 7y ago

Do not hijack my scrollbars or my back button. You do you get kicked in the nuts (if we ever meet). (I'm not actually condoning violence, just giving an example of how annoying you are for frustrating me)

homonculus1 7y ago

>Minimize the real estate that a scrollbar can occupy. Windows scrollbars are obtrusive and very wide by default. Wide scrollbars are a blessing. Better to lose a couple pixels, a fraction of a percent of screen space, than have to constantly line up your cursor over a tiny, yet essential and frequently-used UI tool. I can't stand those dainty little ovals on Mac OS, it's like having to constantly slow down whatever I'm trying to do to thread a needle. It blows my mind that everyone is constantly trying to throw away effortlessly responsive function for such stupidly picky details of form, according to an arbitrary standard of pure aesthetics. Scrollbars should always remain visible and wide.

dehrmann 7y ago

> Moreover, touch devices have popularized hiding the scrollbar, making it invisible until an overflowing element is scrolled, trading design aesthetics for confusion on containers that don’t appear to be overflowing/scrollable at all. Not a touch device, but I couldn't find a file in Finder because it was off-window and the window had no scroll bars, implying I'm seeing everything.

petepete 7y ago

If you design web sites and feel the need to fuck your users over like this, you need to straighten your priorities. As someone who creates accessible sites for a living, this wouldn't fly.

braythwayt 7y ago

"Any sufficiently complicated web application contains an ad-hoc, informally-specified, bug-ridden, slow implementation of half of the browser's native behaviour." To which I would add the adjectives outdated and brittle. It is possible, with care, to replicate almost any UX behaviour that is native to the browser or its underlying platform, but: 1. When the browser or platform changes, the "greenspunned" behaviour does not keep up, so you are either stuck with outdated behaviour, or you have to go back and update your web app to keep up. 2. Most of the high-fidelity implementations rely on a tottering jenga pile of hacks and workarounds that break in unpredictable ways when changes are made to the site's appearance (e.g. a rebranding exercise) or to the browser's underlying behaviour. I've become very conservative about doing anything like this myself. I have extreme difficulty coming up with business justification for reïmplementing standard behaviour. It is not my job to make scroll bars, buttons that depress when you mouse down, and especially, custom text input fields that—thanks to my meddling—don't support standard behaviour like native spell checking, copy and paste. Now please excuse me, I've lined up a row of Geritol and Jack Daniel's ("Gerry & Jack's") shots, and it's time for a drink.

duxup 7y ago

As a webdev (albeit a noob) I just leave the scroll bar to its own devices with ONE EXCEPTION. I hate the "pop" you get when the scroll bar isn't there, and then suddenly there is enough content to scroll and the scroll bar shifts everything to the left. It's not easy to account for for a given page when that may or may not occur when say you show some new content and then suddenly things shift left. It's a pain visually so I just force it to appear regardless. I've had luck with: overflow-y:scroll;

ggg3 7y ago

if you use firefox on android, about:config has a "scrollbar timeout" setting that you can set to 0 or -1... now you will have an always visible scrollbar. you must force close firefox before it takes effect.

XJ6 7y ago

I checked out the demo, it turns out this is for something reminiscent of frames rather than the main scrollbar. Just stop, don't have internal or nested scrollbars at all. Having part of the page scroll independently of the rest is a usability nightmare anyway, especially when you consider how it interacts with zooming.

eitland 7y ago

Nice example of something I wrote about yesterday: perfect ux is impossible: https://erik.itland.no/perfect-ux-is-impossible https://erik.itland.no/perfect-ux-is-impossible (It started as a rant but I have tried to clean it up a bit.) And yes, agree with the majority here: leave my scrollbars alone, if I want a Mac I can ask my boss to get one for me.

chias 7y ago

While the content is interesting, by far the most useful thing I learned from this article is that you can turn off unobtrusive scrollbars on a mac. I have to use one at work, and turning off this feature makes me hate my computer less by a significant amount :)

mehrdadn 7y ago

These articles make me feel like I'm the only person on Earth who's never had a problem with my scrollbars. Do they have to fix things that aren't broken for people?

Narretz 7y ago

I think the proposal for scrollbar-width:thin is good enough for cases where you have a secondary scrollable area in your site or application. Styles beyond that will just become too confusing.

jedberg 7y ago

Something I noticed the other day. If you watch the credits for Ralph Breaks the Internet, it has a scroll bar on the right that accurately reflects the current position in relation to the entire credit roll. It was quite useful!

larrik 7y ago

> Obtrusive scrollbars: scrollbars that take up screen real estate. These do not overlay on top of the content, but appear next to it. > Unobtrusive scrollbars: scrollbars that sit on top of the content. These don’t subtract screen real estate away from the container they belong to. See, I would call "scrollbars covering content" to be obtrusive and "scrollbars outside of the content area" to be unobtrusive... The main scroll bar in my browser should be completely off limits, and treated as part of the browser and not the page. Divs inside the page with their own scrollbars are another matter, but even then...

alxlaz 7y ago

> For designers accustomed to Mac environments but designing multi-platform web experiences, trying to make everyone happy in a way that doesn’t place a lot of performance burden on the end user can be tricky. Well here's a recipe that, since the dawn of the GUI more than 30 years ago, has guaranteed the success of this endeavour: don't override anything that's provided by the platform. It's extremely easy to do in a web page, it requires absolutely no coding whatsoever. You don't need to do anything, and the result looks exactly as each users expects on their platform. It also places no performance burden. And it's guaranteed to make everyone happy -- except for people who are already unhappy with their platform, which you can't really help anyway. Can we please, please, PLEASE put an end to this endless, user-hostile masquerade? > Minimize the real estate that a scrollbar can occupy. Windows scrollbars are obtrusive and very wide by default. Wide and obtrusive? I'm not twenty anymore and my eyes definitely don't work as well as when I was twenty. I find them not wide at all, and definitely not obtrusive. So do many people my age or older. You know what sucks? Thin, subtly-colored, automatically-hidden scrollbars that obscure how much is left from the current page, are hard to see when they do pop up, are hard to find and click (you don't know where the scrollbar is going to pop up when you move your mouse to the edge of the window). * Points finger at GTK and shudders * > Respect changes to user preferences. If a user has selected non-default options for scrollbar behavior, respect those preferences when possible. Why "when possible"? Why not all the time? If a user has gone through the trouble of configuring a non-default setting for the scrollbars, an UI element that's taken for granted to the extent that many computer users don't even know its name, does anyone honestly think it's a good idea to override these settings sometimes? Why? What kind of information do you think you could present for the user, were it not for that pesky scrollbar?

phponpcp 7y ago
The point that they didn't raise is that scrollbars effect the size and position of things in the browser. Try setting 100vw on an element when you have obtrusive scrollbars, the result will be a page which now has horizontal scrolling, leading to terrible UX.
- chrismorgan 7y ago

Andrzejko29 7y ago

Wow

rvlpr 7y ago

just use width:100vw on body and voila Unobtrusive

mixmastamyk 7y ago

No one has surpassed the SGI scrollbars from ancient times. When you moved it, it left an indent of where you were so you could go back easily or compare two pages. Also could middle click to go directly instead of page. That’s still available on some floss desktops but gnome broke that at some point. Still works under mate.

Sir_Cmpwn 7y ago

This was interesting until he started mentioning CSS, then it was no no no no no through the end of the article. Do not mess with scrollbars. In the same class of annoying bullshit: don't mess with text boxes with JavaScript. You won't get it right, there's so many little interactions the system text boxes can do that yours won't and it'll throw a massive wrench into things when I can't use yours the way I'm used to. The same applies to JavaScript for smooth scrolling. There's a browser preference, turn it off for yourself and then keep your nose out of my web browser. The "know-better" attitude of some web devs is terrible.

Endy 7y ago

You can have my scrollbar when you pull it from my cold, dead, GUI. If I don't have a scrollbar visible (with or without cursor), I'd better be in console.

rhplus 7y ago

> The scrollbar is under attack. Scrolljacking hijacks the default scrolling behavior, breaking the implied contract between document length and scrollbar height. … ...so here's how we hijacked system-provided scrollbars to fit our needs.

laufj 7y ago

The iOs hidden scrollbar is a pain. As a web developer, it caused issues because Safari will reflow the content when the scroll bars appear and disappear since the amount of space they take up changes.

notananthem 7y ago

Mac scrollbars are terrible for accessibility. They're way too small, larger scrollbars help users with dexterity/mobility disabilities. I like the windows behavior because for me its reliable, I know where it "is," and yeah I object to "scrolljacking."

notananthem 7y ago

I feel like a lot of these things are "I'm a mac-based designer and the world is moving away from mac-based design so change the world"

dredmorbius 7y ago

All These Elements Are Yours, Except Scrollbars. Attempt No CSS Styling There. Use Them Together. Use Them in Meaning. https://mastodon.cloud/@dredmorbius/102742105247305430 https://mastodon.cloud/@dredmorbius/102742105247305430

hexo 7y ago

After trying the demo and comparing those two implementations I came to conclusion that I really like standard system scrollbars waaay more. Thanks for respecting my own settings and please don't style scrollbars.