Lesson guide

Learning objectives

  • Explain the main purpose of Scrolling in JavaScript.
  • Identify the syntax, APIs, or concepts introduced in this lesson.
  • Use the examples to predict how JavaScript will behave before you run similar code.
  • Connect this topic to nearby lessons in UI Events.

Real-world context

This lesson matters when you need to recognize where Scrolling fits into real JavaScript programs. The event allows reacting to a page or element scrolling.

Key ideas

  • Scrolling is part of the UI Events chapter, so it builds on the surrounding concepts rather than standing alone.
  • Read each code example in two passes: first for the result, then for the rule that explains the result.
  • When a section compares similar features, focus on the condition that makes you choose one feature over another.

Key terms

  • Scrolling
  • UI Events
  • JavaScript

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:

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

In action:

Current scroll = scroll the window

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.

Common mistakes

  • Skipping the small examples and then missing the exact rule that Scrolling depends on.
  • Copying code without changing one value at a time to see which part controls the result.
  • Treating similar-looking syntax or APIs as interchangeable before checking their edge cases.

Summary

  • Scrolling gives you one more piece of the JavaScript mental model.
  • The examples in this lesson are the quickest way to check whether the rule is clear.
  • Revisit the key terms when you meet the same idea in later chapters.

Predict

Before running this scroll-events check, predict the five output lines. It shows that scroll fires after the position already changed, while blocking a scroll-causing keydown can prevent the scroll before it happens.

javascript
Reveal explanation

The output is scroll:120px, key:PageDown:prevented:true:scroll:120, key:ArrowDown:prevented:false:scroll:120, scroll:620px, and key:PageDown:prevented:false:scroll:620. A scroll handler can read the new position and update UI, but calling preventDefault() there would be too late because the scroll has already happened. To stop keyboard-driven scrolling, prevent the default action on the event that causes it, such as keydown for PageDown. CSS overflow is still the more reliable tool when the goal is to make an area unscrollable.

Try it

Move the preventDefault() logic from the keydown handler into the scroll handler, then predict why the first PageDown changes the scroll position anyway.

Practice

  • Rewrite one example from this lesson without looking at the original, then run it and compare the result.
  • Change one input, operator, method call, or option in a code sample and predict what will happen before running it.
  • Explain Scrolling in your own words as if you were reviewing it with another learner.

Keep learning

Continue with Form properties and methods when you are ready for the next lesson.