
Scrolling on the web: A primer - thmslee
https://blogs.windows.com/msedgedev/2017/03/08/scrolling-on-the-web/
======
afandian
I wish people who made webpages trusted browsers to scroll. The number of
sites that play with the scroll speed and consistency by hijacking scroll
events makes me doubt whether the designers spare a passing thought for
usability.

Scrolling is one of those things that (in my opinion) get calibrated in the
brain for hand-eye co-ordination. Which is why (again IMHO) there are
religious wars fought over, for example, Apple's trackpads. This stuff is
important. It can be a jarring experience when scrolling suddenly doesn't
work. Flip side is, I'm sure some people don't care.

There's nothing more annoying than a web designer saying "I know better than
you" and re-implementing features. Because they're usually wrong.

EDIT: Would people accept it if each webpage re-adjusted your mouse pointer
speed and acceleration? Is there any difference between one mouse function and
another? Why do web designers think they have the right?

~~~
LoSboccacc
my only issue with scrolling is how the the bar looks >

[https://i.imgur.com/rgIbdur.png](https://i.imgur.com/rgIbdur.png)

it comes in only one color variant, it's inconsistently looking across
browser, takes a lot of space, especially for scrolling narrow elements, it
has low contrast so it doesn't even do a good job accessibility wise etc.

go to a site like Bulgari's and bam, custom scroller, precisely for this
reason

[https://i.imgur.com/T3Yasht.png](https://i.imgur.com/T3Yasht.png)

you'll notice the page scroller is untouched, because it doesn't contrast with
the page style, being a browser element, but the inside page scroller would
sucks.

you gonna argue with them they have to design their website style to
accomodate the gray slate slab of vintage scrollers?

~~~
afandian
Accommodate? They chose to make something that runs in a web browser so they
should make something that works in a web browser. If I choose to use one with
big scroll bars, that's up to me.

I don't know what browser you're using, but if it's Windows or some GNU/Linux
distro, from memory both of these allow you to customise scrollbars. What if I
have accessibility requirements and want to customise how software that I run
on my own computer works?

~~~
notalaser
> What if I have accessibility requirements and want to customise how software
> that I run on my own computer works?

The modern web cares very little about such requirements, since they are
unlikely to be correlated with making money.

I don't like where things are going :-(.

~~~
JustSomeNobody
Don't worry, it will all implode eventually.

~~~
afandian
I think it's sadly like that comment about Uber a few days ago -- it's a
question of staying insane longer than competitors can remain solvent. The web
will eat everything sooner or later.

------
modeless
Back in the day browsers competed over user friendly features like popup
blockers, even though that technically breaks a web API. Today browsers are so
terrified of breaking a web API that they have allowed the mobile web to
become a cesspool. Browsing most sites has become intolerable, the more modern
the worse. Scrolling freezes for seconds at a time, whole pages jump up and
down constantly while you read, scroll-hijacking ads interrupt you, fixed
position headers obscure half the page and appear/disappear at random,
"mobile-friendly" sites are more often than not worse than desktop sites even
on mobile (plus they break deep links), and I can't be the only one who's
noticed that even the old popup blockers have stopped working!

~~~
chongli
Browsers outside the mainstream are still trying. I'm typing this on the Brave
browser[0] and it's fantastic at dealing with those obnoxious sites. It has a
built in ad blocker and total JavaScript blocking for a site is just 2 taps
away. It's amazing how much smoother sites become when you've blocked all
their anti-user shenanigans.

[0] [https://brave.com/](https://brave.com/)

~~~
JustSomeNobody
Because more and more of them display nothing without js.

------
onion2k
This is a fantastic piece of technical writing. There's plenty of detail and
pretty much no fluff. More of the same please Microsoft.

~~~
dualogy
> _There 's plenty of detail and pretty much no fluff. More of the same please
> Microsoft._

It's par for the course with MS tech docs IMHO, well at least the bulk of
their dev documentation. I even marvelled at the MSDN docs for the same
reasons some 15 years ago as a freshman. I was relieved to see the same spirit
in the "extensibility" articles at
[http://code.visualstudio.com/docs/](http://code.visualstudio.com/docs/)
(compared to the huge furball of distributed-across-blogs-and-forums,
incomplete, or dated equivalent for say Sublime..).

Now. OS-wise and userland-wise I'm certainly no MS fan (and tend to stay as
clear as is feasible), but as far as the entire _developer_ ecosystem goes
(except maybe SharePoint-related, that was quite the mess a few years back,
dunno about today tho), it has been for ages and continues to be: _near-on
utopia_!

~~~
eduren
>except maybe SharePoint-related, that was quite the mess a few years back,
dunno about today tho

Ah, glad you mentioned that. I was about to say that Sharepoint (especially
2005-2010) felt woefully under documented when I worked with it.

I think Sharepoint dev has gotten better since 2013 (the introduction of their
app model), but I left that role before the company upgraded so I can't say
for certain.

------
stupidcar
And yet there is still no way in CSS to, say, freeze a table header and make
the body scrollable. Or freeze one column and make the rest scrollable.

For all its advances, the web platform is still incredibly primitive in some
areas.

~~~
currysausage
You mean _position: sticky_? [1] Yeah, that took way too long, leading to
horrible JS implementations, but it's there now.

[1] [https://developer.mozilla.org/en-
US/docs/Web/CSS/position#St...](https://developer.mozilla.org/en-
US/docs/Web/CSS/position#Sticky_positioning)

~~~
noir_lord
I can't wait for that to be supported but MS Edge currently doesn't support it
(though it's under consideration).

~~~
currysausage
With an ever-declining IE/Edge market share, I usually rely on the principle
of progressive enhancement and accept that certain non-essential features will
only be available to users of modern web browsers (unless, of course, a
specific project has an unusually high number of IE/Edge users, e.g. intranet
applications).

~~~
ry_ry
Declining, but still non-trivial.

We dropped IE10 support when we stopped doing IE9 a year or so ago because
they both had similarly insignificant numbers, and the opportunity cost of
supporting them was too high.

IE11/Edge are also showing fairly similar numbers, which suggests edge uptake
_is_ slow, but even factoring in the extra hours, the bugs they generate
(usually weird flex issues in both cases) we still effectively make more money
by supporting them than not.

~~~
currysausage
Yeah, relying on progressive enhancement is obviously only viable when we talk
about nice-to-have features. Sticky headers will often fall into this
category.

------
nuclx
I'm happy, if I'm able to scroll at all. Hate the trend of dynamically loading
content when scrolling down.

~~~
username223
> Hate the trend of dynamically loading content when scrolling down.

Yep, this sucks. Typical use case: I load a few articles in background tabs to
read later offline. Too late, I realize they either load dynamically, or have
a useless periodic refresh (I'm looking at you, NY Times), so they're useless
when I go to read them. I've mostly learned to quickly scroll all the way
through tabs to make sure they're loaded, but this is a poor solution to a
self-imposed problem (too-heavy pages).

~~~
dredmorbius
Open to archive.is or Internet Archive.

Pocket or similar apps are another option, though most have their own fatal
limitations.

------
anotheryou
What I really want for spacebar scrolling is this in working:
[https://greasyfork.org/en/scripts/20937-red-read-
line](https://greasyfork.org/en/scripts/20937-red-read-line)

An indicator on where the bottom of the screen scrolled to, so I don't need
slow animations or incremental scrolls to find where I left off reading.

(The linked script is not working on all pages and sometimes blocking klicks,
I just threw it together to try if the Idea works. I think the principle works
really really well.)

~~~
narrowtux
IMHO this is only needed if the scrolling is not smooth like on mobile or
macOS.

~~~
anotheryou
Even for scrolling page-wise? Or you mean the keyboard is not needed when
scrolling is smooth? (Die hard keyboard fans will tell you otherwise :) )

------
makecheck
The only thing worse than having a broken scrolling experience on mobile is
imagining just how much extra data was wasted to download that useless script
_so that_ a crappy mobile experience could be had, and how much battery was
wasted running the unnecessary script _so that_ a crappy mobile experience
could be had. There is complete priority inversion on the web and I am so sick
of it; my device should have ample controls to obey ME and not the whims of
some random site.

------
m_fayer
This is the kind of "accessible take on fundamentals that you might not have
even realised were fundamentals" documentation that I'd like to see more of.
It took me a few years of web development to even start thinking about just
how, exactly, the concurrency model of the web functions.

------
romaniv
I'm not sure why anyone is using scrolling events for any standard websites at
all. It's much easier to have a function on timer that detects the current
viewport position and acts accordingly. The code is simpler, the performance
is better, and it's way more future-proof.

------
codedokode
It looks like a poor design desicion made 20 years ago (that wheel event is
synchronous and must be run before scrolling) leads to all major browsers code
becoming unnecessary complicated. I think it would be better to discard that
design and make a new event system that would be used with new pages (and
don't waste developers' resources to optimize old pages).

Maintaining compatibility is good, but at some point we need to stop and make
a new design.

By the way here are the things I'd like to get fixed too:

\- make a distinction between same-domain and cross-domain requests (use
another HTTP method for cross-domain POST request) so all sites get XSRF
vulnerability fixed

\- make cross-domain requests anonymous by default

\- make cookies unaccessible to Javascript by default

\- stop JS loading from blocking the page so we can put script tags in the
header where it makes more sense

\- make as much events asynchronous as possible

\- fix keyboard events, key codes and mouse buttons numbers

\- make it impossible to change window.opener.location and
windows.parent.location

\- add CSS rules to set width for a column in a table, not for cells

\- add error reporting so if some resource (like a script) fails to load the
user gets a message that the page is broken

~~~
iaml
The situation here is IMO similar to Mozilla vs XUL, except when they actually
decided to drop it a ton of people decided to drop firefox. I'm talking about
compatibility in general here, not js scrolling specifically.

~~~
wcummings
>Mozilla vs XUL

What is this referring to (I know what Mozilla and XUL are, didn't know there
was a tiff about it)?

~~~
iaml
XUL will be dropped soon in favour of WebExtentions, and it doesn't offer as
much flexibility as XUL. This means it won't be possible to create addons like
tree-style tabs for example.

~~~
yoasif_
It is being worked on:
[https://wiki.mozilla.org/WebExtensions/sidebarAction](https://wiki.mozilla.org/WebExtensions/sidebarAction)

~~~
iaml
Tree-style tabs requires not only sidebar, but also access to browser
interface to hide actual tabs, which AFAIK it won't get with WebExtensions.

------
jstimpfle
Bold claim (not a professional webdesigner): Many problems with performance
and usability would go away if people made more websites where the document is
100% width and height and contained boxes are individually scrolled. ("Like
frames").

Basically, the way it's typically done when using desktop widget toolkits.

But most websites are still made so that there is only one document-wide
scrollbar.

~~~
noxToken
You must have forgotten the iframe hell that was the early aughts. There are
some sites that could benefit from individually scrolling elements. If you
have a navigation pane that doesn't hide, it would be hell to have all of the
navigation links above the fold while all of the relevant content exists
multiple scrolls/folds/pages below.

I think that many sites wouldn't use individual scrollable elements correctly.
Much like sticky headers, you end up with an upside-down L-shaped (like this:
|‾) area of static, individually scrollable content. Your viewport shrinks to
75%. That's annoying on desktops at best and pretty much unusable on mobile at
worst. It's reminiscent of Toolbar Explorer[0].

If you can use individual elements nicely, go ahead! I believe that if the
trend caught on, it would be worse for everyone.

[0]:
[https://c1.staticflickr.com/3/2040/1924189728_668c4bc4e2.jpg](https://c1.staticflickr.com/3/2040/1924189728_668c4bc4e2.jpg)

~~~
Normal_gaussian
The worst thing about sticky headers is that they dominate the page when you
zoom, making the site completely unusable.

~~~
jstimpfle
I don't know that problem. Browsers should try to zoom everything
proportionally, and I think they have gotten quite good at that (using Firefox
almost exclusively).

Another thing that often annoys me is how sticky headers break text search.
When you search and the browser scrolls just enough to get the hit "on the
page", but still covered by the sticky header. The problem is: not using
proper frames. Sticky covers part of the other frame. Bad.

~~~
tedunangst
Try looking at [http://invisible-
island.net/xterm/manpage/xterm.html](http://invisible-
island.net/xterm/manpage/xterm.html) on a phone. (Or maybe Firefox, too.) the
side bar zooms too, covering page content, and if it's too big, it doesn't
scroll.

~~~
jstimpfle
Can't reproduce a problem with Firefox and don't have a phone handy. Maybe you
can post a screenshot? The sidebar zooming too is what I would expect. At some
insane zoom level the sidebar goes away, which is probably due to CSS and
could be intended.

I don't see a sidebar covering content. Of course the sidebar takes some
space, but as long as it's not _over_ the content that's a different issue
IMO.

------
joshiefishbein
The constant finger-pointing to the shortcomings of other browsers was getting
particularly annoying — especially when IE and Edge are historically the
lowest performing, late-to-the-game browsers.

Nice article, but comically ironic.

~~~
contextfree
IE/Edge has prioritized scrolling performance more than other browsers on
Windows for a long time now (mainly because Microsoft cares more about touch
on Windows than other browser vendors do).

------
syphilis2
I feel that the mechanics of scrolling need to be reworked. I have to do a
number of tweaks to get free scrolling to work as I'd like, as opposed to the
default line-by-line type scrolling. Even line-by-line scrolling has issues,
such as not being aligned with the lines of text or block elements on a web
page. Scrolling ought to have different control options as well, say ^Scroll
scrolls through paragraphs or headings.

~~~
codedokode
This can be implemented in a browser extension. And I don't think everybody
needs scrolling through paragraphs.

------
RyanMcGreal
_There’s a curious anomaly, though: if you try to scroll using touch screen
scrolling, the page happily moves up and down, even while JavaScript is
blocking nearly everything else on the page. This also works for touch pad
scrolling, mouse wheel scrolling, and click-and-drag scrolling (depending on
your browser)._

Mouse wheel scrolling still works on Chrome but not on Firefox.

~~~
nolanl
(Author of the post here.) It may depend on your OS or your Firefox version!
:) I spoke with some Firefox folks after publishing this piece, and it turns
out they've fixed some things in Firefox 52, notably for touch-enabled Windows
laptops.

------
dredmorbius
The first rule of fucking with scrollbars is _you don 't fuck with
scrollbars._

You don't set your scrollbar to fade out when not in use. O hai Pocket. Ficks
that shite plz.

You don't have an "untouchable" scrollbar. It's not merely a graphical
decoration, _it 's a motherfucking control element._ O hai Pocket.... Esp.
your non-incremental-searchable tags list that takes me _a full fucking
minute_ to scroll up or down.

You don't turn a vertical scroll action _into a motherfucking horizontal
scroll._ I forget which academic article site that is, but I'm blackholing
your ass on DNS next time I land there.

You don't nuke the right-hand-side scrollbar, and replace it with a
horizontal-across-the-top motherfucking stripe to indicate how far down the
fucking page I've read. O hai Bloomsburgs.

You don't have fixed headers and footers. Fuck that shit. Firefox Reader Mode
fixes that, usually. Pocket is an alternative.

You don't change the width, colour, buttons, or any other elements of stock
scrollbars.

I am too old to be too old for this shit.

------
barrystaes
I would think that "NOP" code like that example would be optimized out:

setInterval(() => { var start = Date.now(); while (Date.now() - start < 500)
{/* wheeeee! */} }, 1000);

~~~
ygra
Only it it can prove that Date.now() has no side-effects or that the loop
actually ends. (And Date or Date.now() might not be the same things that are
usually expected, since anything in JS can change.)

------
mustafabisic1
"User scrolls with two fingers on a touch pad" This was so weird for me at the
beginning haha Always mixing up and down :D Anybody else had this problem?

~~~
npolet
I really didn't have this issue when it became commonplace. It felt natural.
Like a piece of paper sitting on a table. If i want to "scroll down" the paper
by moving it up, i would touch the paper and move it up.

Scroll down to move down feels completely wrong. In my head I understand that
you're moving the 'viewport' down, but my brain is focused on the viewport's
content, not the viewport itself. So my interactions should be with the
content not the contents viewport. Not sure if that makes sense.

------
combatentropy
I prefer to scroll with the spacebar. Therefore fixed headers are the enemy
(like in this story!).

------
_pmf_
My favorite is dedicated mobile sites that do animations on scrolling.

------
teknopaul
page is not readable in Opera mini. Lolz.

------
juiced
Offtopic, but how come, when I see this website is on windows.com, that I
expect it to load slowly?

