JavaScript scroll

The onscroll event in JavaScript occurs when a scrollbar is used for an element. The event is fired when the user moves the scrollbar up or down. We can use the CSS overflow property for creating a scrollbar.

In HTML, we can use the onscroll attribute and assign a JavaScript function to it. We can also use the JavaScript's addEventListener() method and pass a scroll event to it for greater flexibility.

Example -

<!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 javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.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>