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.
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 additi