Menu
Suppose I have div and I want to fetch data and push data into that div. When the user scrolls within the div, the next set of data will be fetched and pushed into the div. How do I detect scroll bar position with jQuery? I don't want to use any plugin. I need jQuery code. Here is the sample link like ahttp://www.stevefenton.co.uk/cmsfiles/assets/File/infinitescroller.html but it used a plugin.
923
This code has been tested and verified as working. When you scroll your div, the code checks if the scroller reached to the bottom by comparing the scroller height against the scroller position. If so, it calls to a method that gets more content and append it to the div.
Enjoy!
Koby
$(document).ready(function () {
$("div").scroll(function () {
var $this = $(this);
var height = this.scrollHeight - $this.height(); // Get the height of the div
var scroll = $this.scrollTop(); // Get the vertical scroll position
var isScrolledToEnd = (scroll >= height);
$(".scroll-pos").text(scroll);
$(".scroll-height").text(height);
if (isScrolledToEnd) {
var additionalContent = GetMoreContent(); // Get the additional content
$this.append(additionalContent); // Append the additional content
}
});
});
Per your comment, here is the entire HTML page source code which is working (tested under IE 9):
** Please make sure you are referencing jquery library **
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Image</title>
<script src="assets/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("div").scroll(function () {
var $this = $(this);
var height = this.scrollHeight - $this.height(); // Get the height of the div
var scroll = $this.scrollTop(); // Get the vertical scroll position
var isScrolledToEnd = (scroll >= height);
$(".scroll-pos").text(scroll);
$(".scroll-height").text(height);
if (isScrolledToEnd) {
var additionalContent = GetMoreContent(); // Get the additional content
$this.append(additionalContent); // Append the additional content
}
});
});
function GetMoreContent() {
return "<p>This is the div content</p><p>This is the div content</p><p>This is the div content</p><p>This is the div content</p><p>This is the div content</p>";
}
</script>
</head>
<body>
<div style="overflow: scroll;height: 150px; border: 1px solid red;">
<p>This is the div content</p>
<p>This is the div content</p>
<p>This is the div content</p>
<p>This is the div content</p>
<p>This is the div content</p>
<p>This is the div content</p>
</div>
Scroll Height: <span class="scroll-height"></span> <br/>
Scroll position: <span class="scroll-pos"></span>
</body>
</html>
How about something along the lines of:
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
var new_div = '<div class="new_block"></div>';
$('.main_content').append(new_div.load('/path/to/script.php'));
}
});
This will append a new element to the main page container when the scrollbar reaches the bottom of the page. It also fills this new element with content loaded from an external script.
If you want to detect whether a user has scrolled to the bottom a specific div:
$('.some_element').bind('scroll', function(){
if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight){
var new_div = '<div class="new_block"></div>';
$('.main_content').append(new_div.load('/path/to/script.php'));
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
