In this article, we will learn to show scroll updates when scrolling down on a webpage. The scroll() event handler can be used to detect any scrolling in the page, but we only need to detect the scrolling down. The scroll down event can be handled using the scroll() and scrollTop() events.
HTML DOM Window Scroll() Method: The scroll event is sent to an element when the user scrolls to a different place in the element. It applies to window objects, but also to scrollable frames and elements with the CSS overflow property set to scroll.
Syntax:
$( "#id" ).scroll(function() {});scrollTop(): Get the current vertical position of the scroll bar for the first element in the set of matched elements or set the vertical position of the scroll bar for every matched element. This method does not accept any arguments.
Syntax:
$( "#id" ).scrollTop( );
Approach:
- We will set the initial vertical Position to 0
- If any scrolling is done, it will be detected by the scroll() event and the current vertical position is fetched using scrollTop() event.
- If the initial vertical position is less than ( < ) current vertical position then the text ” Scroll down detected ” is displayed.
- The text will be faded out using the following code.
$("#updater").fadeOut(1000);- If the initial vertical position is greater than ( > ) current vertical position then the output text display property will be set to “none”.
$("#updater").css('display','None');Example: The following code demonstrates the above approach.
<!DOCTYPE html> <html>
<head>
<meta charset="utf-8">
<script src=
</script>
<script>
var x = 0;
$(document).ready(function () {
var prevPosition = 0;
var currPosition;
$('p').css('margin-bottom', '50px');
$("div").scroll(function () {
currPosition = $("div").scrollTop();
if (prevPosition < currPosition) {
$("#updater").css('display', 'block');
$("#updater").fadeOut(1000);
prevPosition = currPosition;
}
else if (prevPosition >= currPosition) {
$("#updater").css('display', 'None');
prevPosition = currPosition;
}
});
});
</script>
</head>
<body>
<h1> update the scroll down event </h1>
<div style="height:300px;
width:100%; overflow:scroll;">
<p>some data</p>
<p>some data</p>
<p>some data</p>
<p>some data</p>
<p>some data</p>
<p>some data</p>
<p>some data</p>
<p>some data</p>
<p>some data</p>
<p>some data</p>
</div>
<h1 id="updater" style="display:none;">
scroll down detected
</h1>
</body>
</html>
|
Output: