
Two Browsers Walked into a Scrollbar - robin_reala
https://www.filamentgroup.com/lab/scrollbars/
======
jvzr
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.

~~~
Cyberdog
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.

~~~
NeedMoreTea
I _used_ to like MacOS's subtler than Windows approach to scrollbars, but they
became too subtle. They were lovely in Snow Leopard: Gently aqua coloured,
arrows, large enough for middle aged (or overworked, and in a hurry) eyes.
Obvious.

Then they went to Lion and ruined them: grey and almost invisible by design.
Magical mystery popping into existence when you hover where it ought to be.
Probably. I think this is when they inverted the magic mouse scroll behaviour
to pretend like your iMac was an iPhone.

~~~
mistersquid
> they inverted the magic mouse scroll behaviour to pretend like your iMac was
> an iPhone.

These are UI/UX conventions. Everything is "pretend".

For example, users whose mental model of scrolling tracks the viewport will
want to scroll up to move the content down. The viewport goes in the opposite
direction of the content.

Fair enough.

However such users don't seem to want the same for horizontal scrolling.
Tracking the viewport left moves the content to the right and vice versa. But
horizontal scrolling in macOS always tracks the content regardless of the
setting in System Preferences > Trakcpad > Scroll direction: Natural.

The exception (turning it off for "inverted" scrolling or "viewport tracking")
is only for vertical scrolling, not horizontal, which suggests the mental
model can be adapted though users who prefer viewport tracking report they
cannot adjust.

~~~
NeedMoreTea
Sure, perhaps if I had known nothing else... Except it's not a convention any
other platform ever followed.

Of the few people I've bumped into who had it set to natural, and had for some
considerable time, well even those were happy to learn it could be changed,
and didn't want to go back. So there's probably something makes it feel odd,
and stay feeling odd, for many. What I couldn't say, but not just restricted
to those who spent time on other platforms too, like me. Of people whose
machines I get to use from time to time at work, they're all set to unnatural
too. We're nearly all iPhone users. So it's not just me being odd and rare
edge case. :)

Personally, I don't want the same mental model between phone and desktop, as
the metaphors are different. UI should look different, act different, suited
to using each device. The Win 8 on, Lion on desire to make my laptop "feel"
more like a mobile, continues to feel like a huge mistake.

------
jandrese
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.

~~~
xyzzy_plugh
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
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
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.

------
alxlaz
> 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
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
That’s because the vw and vh units are obtuse, being the full viewport
dimensions _inclusive of document element scrollbars_ , and there’s no
workaround for that. (There used to be in Firefox, but when the dust settled
and all the browsers decided to iron out their inconsistencies, they dropped
Firefox’s behaviour as potentially surprising, despite it being the only sane
thing out there, and haven’t talked much about making a unit that’s actually
_useful_ for this effect.) The effect of this is that the vw and vh units are
pretty close to _never_ the right thing. I have before used CSS Custom
Properties to achieve a sane result, putting `:root { --scrollbar-width: 17px
}` into the document based on a JavaScript calculation, with `--vw: calc(1vw -
0.01 * var(--scrollbar-width))`, so that then you can do `calc(50 *
var(--vw))` and it’s like 50vw but sane. But this technique requires
JavaScript, so I don’t consider it acceptable in all places.

------
braythwayt
_" 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.

------
jeroenhd
"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
How is finder's UI related to scrollbars?

~~~
murermader
He was just making a point, that stuff kinda feels weird when you are not used
to it, not that finders UI is weird.

------
vezycash
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
The backspace button no longer works to go back, you need to press
alt+backspace

~~~
vezycash
That's chrome only. However, the history jacking applies even if you use the
browser's back button.

------
zwaps
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!

------
pixelbath
> 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
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.

~~~
dmix
The question is about what’s consistent for the user not the application
developer

~~~
tetraca
Gopher was arguably more consistent in both regards. But pretty vs functional
wasn't even a tradeoff you could really consider.

~~~
dmix
The protocols certainly influence the designs but there’s always a level of
flexibility in the clients (ie, browsers) which the app devs will still have
to wrangle.

Some devs value consistency across platforms so their app always looks and
functions the same. But I personally think it’s best to default to the
system’s UI. Sure I can make it look Mac-esque on desktop Firefox on Windows
but I’d rather it look and function exactly like every other windowed
application they use on the platform.

There’s also nothing inherent in using JS heavy frontends like React which
encourages non-standard browser behaviour. You can still present complex
interactive elements while keeping scrolling and other usability stuff like
back buttons, copy/pasting, form input behaviour (not breaking LastPass and
browser autocomplete for ex), not losing form data on submit after validation
errors, etc. You have to go out of your way to explicitly modify default
browser behaviour, usually via 3rd party libraries added on to these
frameworks.

Personally I found it was far more common in the jQuery world, which is still
rampant among those awful prebuilt themes people and companies always use for
their websites.

------
firasd
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.)

------
IE6
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.

------
dec0dedab0de
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.

------
Someone
_”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
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
That's an insightful comment and a good (IMO) way of slowing down the outrage
train, if only by a tiny bit. Thanks.

------
larrik
> 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...

------
ubu7737
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
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
>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!

------
duxup
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;

------
homonculus1
>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.

------
Sir_Cmpwn
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.

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

------
chooseaname
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)

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

------
otras
> _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.

------
zamadatix
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 :/.

------
dehrmann
> 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.

------
eitland
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.

------
jedberg
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!

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

------
mehrdadn
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?

------
notananthem
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."

------
hexo
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.

------
rhplus
> _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.

------
ChrisSD
> 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.

~~~
mr__y
>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
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.

------
mixmastamyk
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.

------
XJ6
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.

------
dredmorbius
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)

------
chias
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 :)

------
Narretz
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.

------
petepete
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.

------
Endy
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.

------
notananthem
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"

------
kovek
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.

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

------
laufj
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.

------
rvlpr
just use width:100vw on body and voila Unobtrusive

------
YeahSureWhyNot
for a second I thought its /r/jokes

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

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

