The scroll() event occurs when you scroll any HTML element.
Let us simplify with the below example.
<html>
<head>
<title> My First Programme </title>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
</head>
<body>
<h1> JQuery </h1>
<p style="border:3px solid blue;height:80px;width:350px;overflow: scroll;">
In a huge pond, there lived many fish.
They were arrogant and never listened to anyone.
In this pond, there also lived a kind-hearted crocodile.
He advised the fish, not to be arrogant and overconfident.
But the fish never listened to him.
One afternoon, the crocodile was resting
when two fishermen stopped there to drink water.
</p>
<div class = "myClass"> </div>
<script>
$("p").scroll(function(){
$(".myClass").text("You have scrolled the paragraph");
});
</script>
</body>
</html>
So, if you see the above code. We can see that there is a <p> element,
<p style="border:3px solid blue;height:80px;width:350px;overflow: scroll;"> In a huge pond, there lived many fish. They were arrogant and never listened to anyone. In this pond, there also lived a kind-hearted crocodile. He advised the fish, not to be arrogant and overconfident. But the fish never listened to him. One afternoon, the crocodile was resting when two fishermen stopped there to drink water. </p>
That has a CSS property,
style="border:3px solid blue;height:80px;width:350px;overflow: scroll;
Which creates a scrollable box.
Now, if we see the JQuery statement,
$("p").scroll(function(){
$(".myClass").text("You have scrolled the paragraph");
});We are checking, if someone has scrolled the contents of <p> element. If so the scroll() event gets triggered.
$("p").scroll(...);
And the anonymous function inside the scroll() event,
function(){
$(".myClass").text("You have scrolled the paragraph");
}And if you have scrolled the contents of <p> element, the <div> element with class name .myClass changes,
<div class = "myClass"> </div>
With,
You have scrolled the paragraph