Learn how to effectively interact with scrolling on web pages, including how to react to scroll events and utilize throttling techniques.

Introduction

Scrolling a webpage to view content beyond the visible area, commonly referred to as “below the fold,” is one of the most common user actions. Understanding how to work with scrolling is crucial for building a seamless user experience. In this article, we will explore how to listen for scroll events, retrieve scroll positions, and implement throttling techniques for improved performance.

Listening for Scroll Events

To receive information about scroll events, we can attach an event listener to the scroll event on the window object. This allows us to detect whenever the user scrolls the page. The following code demonstrates how to accomplish this:

window.addEventListener('scroll', (event) => {
 // handle scroll event
})

Within the event handler function, you can access the current vertical scrolling position using the window.scrollY property and the horizontal scrolling position using window.scrollX. Here’s an example:

window.addEventListener('scroll', (event) => {
 console.log(window.scrollY) // get vertical scroll position
 console.log(window.scrollX) // get horizontal scroll position
})

It’s important to note that the scroll event is not triggered just once during scrolling. Instead, it fires multiple times throughout the scrolling process. This can become problematic if complex operations are performed directly within the event handler.

Implementing Throttling

To ensure optimal performance while working with scroll events, we need to implement throttling. Throttling limits the number of times the event handler function is executed. Libraries like Lodash provide comprehensive throttling functionalities with over 100 lines of code. However, for simplicity, we can create a basic throttling implementation using setTimeout to cache the scroll event every 100 milliseconds:

let cached = null
window.addEventListener('scroll', (event) => {
 if (!cached) {
 setTimeout(() => {
 // perform desired operations after 100ms
 cached = null
 }, 100)
 }
 cached = event
})

By utilizing this throttling technique, the event handler will only execute once during the specified interval, minimizing performance impacts and providing a smoother experience for users.

Throttling is also applicable to other events like mousemove, which fires multiple times as the user moves the mouse.

Practical Example

To see the above concepts in action, you can check out an example on CodePen. The example demonstrates how to work with scrolling events and implement throttling for improved performance.

Retrieving Scroll Position of an Element

In addition to monitoring the overall page scroll, there may be scenarios where you need to determine the scroll position of a specific element. Fortunately, accessing the scroll positions of an element is straightforward. You can retrieve the current vertical position using the scrollTop property and the horizontal position using the scrollLeft property. Here’s an example:

const container = document.querySelector('.container')
container.scrollTop // get vertical scroll position
container.scrollLeft // get horizontal scroll position

Moreover, these properties are read/write, allowing you to also set the scroll position as needed:

const container = document.querySelector('.container')
container.scrollTop = 1000 // set vertical scroll position
container.scrollLeft = 1000 // set horizontal scroll position

scrollLeft and scrollTop

Conclusion

In this tutorial, we explored how to work with scrolling on web pages, including listening for scroll events, retrieving scroll positions, and implementing throttling techniques. By following these practices, you can enhance the user experience and optimize the performance of your website.