Over a million developers have joined DZone.

Making scrolling less confusing

DZone's Guide to

Making scrolling less confusing

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

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.

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.


Published at DZone with permission of Allen Coin. See the original article here.

Opinions expressed by DZone contributors are their own.


Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.


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

{{ parent.tldr }}

{{ parent.urlSource.name }}