How to do infinite scrolling with javascript only without jquery
javascript
Solution
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 `px`s from bottom you want the trigger to execute.
Fiddle
Problem
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