Scrolling

The scroll event allows reacting to a page or element scrolling. There are quite a few good things we can do here.

For instance:

• Show/hide additional controls or information depending on where in the document the user is.
• Load more data when the user scrolls down till the end of the page.

Here’s a small function to show the current scroll:

window.addEventListener('scroll', function() {
  document.getElementById('showScroll').innerHTML = window.pageYOffset + 'px';
});

In action:

[Interactive content - see original]

The scroll event works both on the window and on scrollable elements.

Prevent scrolling

How do we make something unscrollable?
We can’t prevent scrolling by using event.preventDefault() in onscroll listener, because it triggers after the scroll has already happened.
But we can prevent scrolling by event.preventDefault() on an event that causes the scroll, for instance keydown event for pageUp and pageDown.
If we add an event handler to these events and event.preventDefault() in it, then the scroll won’t start.
There are many ways to initiate a scroll, so it’s more reliable to use CSS, overflow property.
Here are few tasks that you can solve or look through to see applications of onscroll.

Tasks

Endless page
importance: 5

Create an endless page. When a visitor scrolls it to the end, it auto-appends current date-time to the text (so that a visitor can scroll more).
Like this:

[Interactive content - see original]

Please note two important features of the scroll:

1. The scroll is “elastic”. We can scroll a little beyond the document start or end in some browsers/devices (empty space below is shown, and then the document will automatically “bounces back” to normal).
2. The scroll is imprecise. When we scroll to page end, then we may be in fact like 0-50px away from the real document bottom.

So, “scrolling to the end” should mean that the visitor is no more than 100px away from the document end.

P.S. In real life we may want to show “more messages” or “more goods”.

Open a sandbox for the task.

Up/down button
importance: 5

Create a “to the top” button to help with page scrolling.

It should work like this:

• While the page is not scrolled down at least for the window height – it’s invisible.
• When the page is scrolled down more than the window height – there appears an “upwards” arrow in the left-top corner. If the page is scrolled back, it disappears.
• When the arrow is clicked, the page scrolls to the top.

Like this (top-left corner, scroll to see):

[Interactive content - see original]

Open a sandbox for the task.

Load visible images
importance: 4

Let’s say we have a slow-speed client and want to save their mobile traffic.

For that purpose we decide not to show images immediately, but rather replace them with placeholders, like this:

<img src="placeholder.svg" width="128" height="128" data-src="real.jpg">

So, initially, all images are placeholder.svg. When the page scrolls to the position where the user can see the image – we change src to the one in data-src, and so the image loads.
Here’s an example in iframe:

[Interactive content - see original]

Scroll it to see images load “on-demand”.

Requirements:

• When the page loads, those images that are on-screen should load immediately, prior to any scrolling.
• Some images may be regular, without data-src. The code should not touch them.
• Once an image is loaded, it should not reload any more when scrolled in/out.

P.S. If you can, make a more advanced solution that would “preload” images that are one page below/after the current position.

P.P.S. Only vertical scroll is to be handled, no horizontal scrolling.

Open a sandbox for the task.

Original Content at: https://javascript.info/onscroll

© 2007–2024 Ilya Kantor, https://javascript.info