Are there any alternatives to the jQuery endless scrolling plugin?
http://www.beyondcoding.com/2009/01/15/release-jquery-plugin-endless-scroll/
The jQuery Infinite Scroll feature has become quite common now days. Different websites including Facebook and Twitter are already using it. This feature helps in creating Auto Paging (not link-based paging) in a web page so when a user scrolls down to the bottom, the next page's content are automatically loaded.
Infinite scrolling is a feature that allows you to load some pics on a website and then load more once the user reaches the end of the webpage (like we see on Pinterest). We will start off by creating three files, index. html , style. css , and app.
Infinite Ajax Scroll empowers web professionals to create powerful interactive paginations. Back-button proof. The browser url is automatically updated when you scroll between pages. Users can reload or bookmark the page and always return to the right place.
Infinite scrolling is a web-design technique that loads content continuously as the user scrolls down the page, eliminating the need for pagination. The success of infinite scrolling on social media sites such as Twitter have made this technique popular, but that doesn't mean you should do it too.
This should do the same trick without plugin
$(window).scroll(function () {
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 100) {
//Add something at the end of the page
}
});
According to @pere's comment, it's better to use the code below to avoid excessive amount of event firing.
Inspired from this answer https://stackoverflow.com/a/13298018/153723
var scrollListener = function () {
$(window).one("scroll", function () { //unbinds itself every time it fires
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 100) {
//Add something at the end of the page
}
setTimeout(scrollListener, 200); //rebinds itself after 200ms
});
};
$(document).ready(function () {
scrollListener();
});
Combining Ergec's answer and Pere's comment:
function watchScrollPosition(callback, distance, interval) {
var $window = $(window),
$document = $(document);
var checkScrollPosition = function() {
var top = $document.height() - $window.height() - distance;
if ($window.scrollTop() >= top) {
callback();
}
};
setInterval(checkScrollPosition, interval);
}
distance
is the number of pixels from the bottom of the screen when the callback will fire.
interval
is how often the check will run (in milliseconds; 250-1000 is reasonable).
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