Menu
I wish to implement infinite scrolling with javascript and without jquery.
I am new to javascript.
After searching all over the net, I have this code.
<!DOCTYPE html><html lang="en"><head><title>scrolling</title>
<style>
.page {height: 900px;border:solid 1px #ccc}
</style>
</head>
<body>
<div id="scrollcontent">
<div class="page"></div>
</div>
<script>
//########################
function getScrollXY() {
var scrOfX = 0, scrOfY = 0;
if( typeof( window.pageYOffset ) == 'number' ) {
//Netscape compliant
scrOfY = window.pageYOffset;
scrOfX = window.pageXOffset;
} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
//DOM compliant
scrOfY = document.body.scrollTop;
scrOfX = document.body.scrollLeft;
} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
//IE6 standards compliant mode
scrOfY = document.documentElement.scrollTop;
scrOfX = document.documentElement.scrollLeft;
}
return [ scrOfX, scrOfY ];
}
function getDocHeight() {
var D = document;
return Math.max(
D.body.scrollHeight, D.documentElement.scrollHeight,
D.body.offsetHeight, D.documentElement.offsetHeight,
D.body.clientHeight, D.documentElement.clientHeight
);
}
document.addEventListener("scroll", function (event) {
if (getDocHeight() == getScrollXY()[1] + window.innerHeight)
{
var oldcontent = document.getElementById('scrollcontent');
oldcontent.innerHTML = oldcontent.innerHTML + '<div class="page">new content loaded</div>';
document.getElementById("scrollcontent").innerHTML=oldcontent.innerHTML;
}
});
</script>
</body>
</html>
However, this code works only when the scrollbar touches the bottom.
I wish it to work when the user is 100 pixels from the bottom. (or near the bottom)
I also need the code to work in most of the modern browsers, mobile devices etc.
Also, is there any way to improve this code? Please suggest.
If there are any errors in the code, please correct.
Thank you
429
$(window). scroll(function(){ if ($(window). scrollTop() == $(document). height()-$(window).
Pagination works better on websites where users are looking for specific pieces of content. Whereas infinite scroll is better suited for websites where you want users to discover and explore the content available. Infinite scroll is also much more effective for mobile devices.
Infinite scroll uses lazy loading and executes its demand to load more data (products or content) at the bottom of the page, without requiring an action such as the click of a button. On-demand loading is used to optimize content delivery by reducing time consumption and memory usage.
first of all i don't think that you have to support netscape and ie6 anymore. So with that in mind I created following script
document.addEventListener("scroll", function (event) {
checkForNewDiv();
});
var checkForNewDiv = function() {
var lastDiv = document.querySelector("#scroll-content > div:last-child");
var lastDivOffset = lastDiv.offsetTop + lastDiv.clientHeight;
var pageOffset = window.pageYOffset + window.innerHeight;
if(pageOffset > lastDivOffset - 20) {
var newDiv = document.createElement("div");
newDiv.innerHTML = "my awesome new div";
document.getElementById("scroll-content").appendChild(newDiv);
checkForNewDiv();
}
};
also see jsfiddle
60
I used scrollHeight, scrollTop and clientHeight attribute of the element to find whether the scroll hit the bottom. Here is my code. I hope it helps.
Click here for more information.
Image describing scrollHeight, scrollTop and clientHeight.
<html>
<head>
<title>Infinite Scroll</title>
</head>
<body>
<h3>Infinite Scroll Example</h3>
<div id="scrollContent" style="overflow-y: scroll; height: 100px; width: 500px">
<div style="height: 300px; background-color: red">
</div>
<div>
</body>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded',function () {
var elm = document.getElementById('scrollContent');
elm.addEventListener('scroll',callFuntion);
function callFuntion(){
var scrollHeight = elm.scrollHeight;
var scrollTop = elm.scrollTop;
var clientHeight = elm.clientHeight;
if(scrollHeight-scrollTop == clientHeight){
elm.innerHTML += '<div style="height: 300px; background-color: blue"> New Element Added </div>' ;
}
}
});
</script>
</html>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
