Scroll Event Listener JavaScript

1. the Scrollbar and Scrollbar Position in JavaScript
2. the Scroll Event in JavaScript
3. Listen to the scrollEvent in JavaScript
4. Use the scroll Function as a Callback in jQuery
5. Use the window Object to Listen to a scrollEvent in JavaScript

In this article, we will be explaining how to get a scrollbar position in JavaScript, and we will discuss:

• The scrollbar and scrollbar position
• The scroll event in JavaScript

the Scrollbar and Scrollbar Position in JavaScript

A horizontal or vertical bar, usually on the right or bottom of a screen, allows you to change the window viewing area in a certain direction.

Today, most people are familiar with the scroll bar because they need to horizontally on every web page to view more content.

The scrollbar position is vertical and horizontal of the viewing area of the window. Showing the user how much he has scrolled or can scroll to the left or the bottom.

The scroll position is 0px at page loading from the left and 0px from the top.

the Scroll Event in JavaScript

A scroll event is a JavaScript event that triggers a scrollbar position vertically or horizontally. It can be listened to using a JavaScript event listener or JavaScript event handler.

Listen to the scrollEvent in JavaScript

Since scroll is a JavaScript event, we can listen to a scroll event on any Document Object Model element by adding an event listener to it.

<div id="content">
   This is a random paragraph, we will be wrting this paragraph for our basic understanding. Nothing here is going to make sense. So you could stop reading the paragraph. And look at the source code if you want.
</div>
<script>
   document.getElementById("content").addEventListener("scroll", () => console.log("Div was scrolled"));
    //logs: Div was scrolled
</script>

In the code mentioned above, there is a div element. There is an event listener in the JavaScript section to listen to scroll events on that particular div element.

Whenever someone scrolls inside that div, it will log a string saying Div was scrolled.

Use the scroll Function as a Callback in jQuery

Similarly, a JavaScript event can be handled using JavaScript Framework such as jQuery.

<div id="content">
   This is a random paragraph, we will be wrting this paragraph for our basic understanding. Nothing here is going to make sense. So you could stop reading the paragraph. And look at the source code if you want.
</div>
<script>
    $("#content").scroll(function(){
      console.log("Div was scrolled")
    });
    //logs: Div was scrolled
</script>

A jQuery scroll event is attached to the div element with an id of content.

The scroll method of jQuery has a callback function that will trigger whenever someone scrolls inside the div.

Use the window Object to Listen to a scrollEvent in JavaScript

We can listen to the scroll event on the window using the JavaScript object as we know that the window object is not different from any other JavaScript object.

We can use scroll event Listeners to listen to the scroll event.

window.addEventListener('scroll', (event) => {
  let scrollY = this.scrollY;
  let scrollX = this.scrollX;
  console.log(scrollY);
  console.log(scrollX);
});

The this signifies the window object. The scrollY is a property of window that tells us the number of pixels in the window viewing area scrolled from the top.

The scrollX is a property of the window object and tells how much the user has been scrolled from the left.