The onscroll event in JavaScript is triggered when a scrollbar is interacted with on a specific element. This event activates as the user navigates the scrollbar either upwards or downwards. To generate a scrollbar, we can utilize the CSS overflow property.
In HTML, the onscroll attribute allows us to link a JavaScript function to it directly. Alternatively, for enhanced flexibility, we can utilize JavaScript's addEventListener method and provide a scroll event to it.
Syntax
At this point, we will examine the syntax for implementing the onscroll event in HTML as well as in JavaScript, both by directly using the event attribute and by employing the addEventListener method.
In HTML
<element onscroll = "fun()">
In JavaScript
object.onscroll = function() { myScript };
In JavaScript, the addEventListener function is utilized to attach an event handler to a specified element.
object.addEventListener("scroll", myScript);
Let us examine a few examples to gain a better understanding of the scroll event.
Example - Using onscroll attribute in HTML
In this instance, we are utilizing the HTML onscroll attribute. There exists a paragraph element identified by id = "para," to which we will apply the onscroll attribute. When a user scrolls within the paragraph, both the text color and the background color of the paragraph will undergo changes.
<!DOCTYPE html>
<html>
<head>
<style>
#para{
width: 250px;
height: 150px;
overflow: scroll;
border: 1px solid red;
font-size: 25px;
}
</style>
</head>
<body>
<h1> Hello world :):) </h1>
<h2> Scroll the bordered text to see the effect. </h2>
<p> This is an example of using the <b> onscroll </b> attribute. </p>
<p id = "para" onscroll = "fun()"> Hi, Welcome to the logic-practice.com. This site is developed so that students may learn computer science related technologies easily. The logic-practice.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better. </p>
<script>
function fun() {
document.getElementById("para").style.color = "red";
document.getElementById("para").style.background = "lightgreen";
}
</script>
</body>
</html>
Output
Upon scrolling the text framed within the border displayed on the screen, the resulting output will be as follows -
At this point, we will explore the implementation of the onscroll event utilizing JavaScript.
Example - Using JavaScript
<!DOCTYPE html>
<html>
<head>
<style>
#para{
width: 250px;
height: 150px;
overflow: scroll;
border: 1px solid red;
font-size: 25px;
}
</style>
</head>
<body>
<h1> Hello world :):) </h1>
<h2> Scroll the bordered text to see the effect. </h2>
<p> This is an example of using JavaScript's <b> onscroll </b> event. </p>
<p id = "para"> Hi, Welcome to the logic-practice.com. This site is developed so that students may learn computer science related technologies easily. The logic-practice.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better. </p>
<p id = "para1"></p>
<script>
document.getElementById("para").onscroll = function() {fun()};
function fun() {
document.getElementById("para").style.color = "red";
document.getElementById("para").style.background = "lightgreen";
document.getElementById("para1").innerHTML = "You are scrolling the content";
}
</script>
</body>
</html>
Output
Upon scrolling the outlined text displayed on the screen, the subsequent output will be generated -
Example - Using addEventListener
<!DOCTYPE html>
<html>
<head>
<style>
#para{
width: 250px;
height: 150px;
overflow: scroll;
border: 1px solid red;
font-size: 25px;
}
</style>
</head>
<body>
<h1> Hello world :):) </h1>
<h2> Scroll the bordered text to see the effect. </h2>
<p id = "para"> Hi, Welcome to the logic-practice.com. This site is developed so that students may learn computer science related technologies easily. The logic-practice.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better. </p>
<p id = "para1"></p>
<script>
document.getElementById("para").addEventListener("scroll", fun);
function fun() {
document.getElementById("para").style.color = "red";
document.getElementById("para").style.background = "lightgreen";
document.getElementById("para1").innerHTML = "You are scrolling the content";
}
</script>
</body>
</html>
Output
Upon reviewing the text enclosed within the borders displayed on the screen, we will obtain the subsequent output -