Arnold Arnold - 1 year ago 120
Javascript Question

How to do infinite scrolling with javascript only without jquery

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>
.page {height: 900px;border:solid 1px #ccc}

<div id="scrollcontent">

<div class="page"></div>



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>';


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

Answer Source

What about replacing this line of code:

if (getDocHeight() == getScrollXY()[1] + window.innerHeight)

with the following:

if (getDocHeight() - 20 <= getScrollXY()[1] + window.innerHeight) 

Where 20 is the number how much pxs from bottom you want the trigger to execute.


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download