Over a million developers have joined DZone.

Making scrolling less confusing

DZone's Guide to

Making scrolling less confusing

· Web Dev Zone ·
Free Resource

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

Editor's Note: This article has been syndicated on DZone with the express permission of the original author, Jonathan Svärdén.

Scrolling through a long text on a featureless background is confusing. When you’re done reading the text on the screen you have to keep track of where you left off. This means keeping your eyes fixed on a certain point on a moving field of visually homogeneous text. Even with lots of practice this is difficult, and introduces a mental overhead that takes you out of whatever it was you were reading.

The accessibility implications of this are often overlooked, but I’ve seen many inexperienced computer users, particularly old people, struggle with scrolling. People with certain disabilities, such as strabismus, can also have a hard time tracking text on a screen.

Some people have suggested pretty radical ways of improving scrolling, for example Richard Wallis in his “I want the world to scroll this way”. I don’t think you have to go quite that far though.

Taking a lesson from touchscreens

Notice that on a mobile device, this problem does not exist , at least not nearly to the same degree. When you scroll, your finger indicates a fixed point on the page, and you don’t lose track of where you are.

Using that basic concept as a model, I’ve put together a quick prototype.


The page shows an icon indicating where the bottom of the screen was when you started scrolling. Try scrolling with and without the indicator. I find that you get used to it quite quickly and start missing it if you turn it off. The code for this concept is available on GitHub. Feel free to fork and improve it.

Designing your site with this issue in mind can help alleviate many of the problems described. Replacing a completely white or single-colored background with a subtle background pattern, for instance, can be a great help. Creating your content to provide natural visual markers, such as being liberal with the use of headings and using short paragraphs, is something else that’s easy to do. In those situations where none of this is possible, or for whatever reason undesirable, I think something like the concept above can be a nice touch that provides enhanced accessibility.

Take a look at the Indigo.Design sample applications to learn more about how apps are created with design to code software.


Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}