Display message on scroll Event

In this tutorial, we will discuss about how to display message on scrolling of text area using jQuery scroll event.

In this tutorial, we will discuss about how to display message on scrolling of text area using jQuery scroll event.

Display message on scroll Event

In this tutorial, we will discuss about how to display message on scrolling of text area using jQuery scroll event. In this example, a text area with scroll bars are given , when we scroll any one of it on time, it will display a message. Each time you scroll up/down it will show a message.

appendOnScroll.html

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.4.2.js"></script>
</head>
<body>
<div id="target" style="overflow: scroll; width: 300px; height: 300px;">
India, officially the Republic of India is a country in South Asia. It is the
seventh-largest country by geographical area, the second-most populous
country with over 1.18 billion people, and the most populous
democracy in the world.[16][17] Mainland India is bounded by the Indian
Ocean on the south, the Arabian Sea on the west, and the Bay of Bengal on
the east; and it is bordered by Pakistan to the west;[note] China, Nepal, and
Bhutan to the north; and Bangladesh and Burma to the east. India is in the
vicinity of Sri Lanka, and the Maldives in the Indian Ocean, its Andaman and
Nicobar Islands are also in the vicinity of the Indonesian island of Sumatra in the
Andaman Sea, and in the Andaman Sea India also shares a maritime border with
Thailand.[18] India has a coastline of 7,517 kilometres (4,700 mi).[19]
</div>
<div id="other">
Trigger the handler
</div>
<div id="log"></div>
<script>
$('#target').scroll(function() {
$('#log').append('<div>Handler for .scroll() called.</div>');
});
</script>

</body>
</html>