JavaScript Infinite Scroll with Cross-Browser

Here meant to explain how to create cross-browser compatible infinite scroll solution with JavaScript.

Infinite Scroll is also called autopagerize, unpaginate, endless pages. Essentially it detects when user reaches end of an HTML element or the bottom of page. i.e., finished reading and then loading new data asynchronous using AJAX and displaying it. Therefore the page seems to load infinitely.

The basic JavaScript required for infinite scrolling is detecting whether user is at the bottom of the page or not.

Here window.innerHeight and window.scrollY are NOT supported by IE8 and lower. The cross-browser compatible version for window.innerHeight is document.documentElement.clientHeight as well as for window.scrollY is document.documentElement.scrollTop.

According W3Schools reference, Window Size properties can be used to determine the size of the browser window (the browser viewport, NOT including toolbars and scrollbars).

For IE 9 or above, Chrome, Firefox, Opera, and Safari:

  • window.innerHeight – the inner height of the browser window
  • window.innerWidth – the inner width of the browser window

For IE 8, 7, 6, 5:

  • document.documentElement.clientHeight or document.body.clientHeight
  • document.documentElement.clientWidth or document.body.clientWidth

So the safe and cross-browser alternative (covering all browsers) can be as below

Full Javascript code of cross-browser infinite Scroll solution:

More examples for infinite scroll solution:


Resource:

Leave a Reply

Your email address will not be published. Required fields are marked *

CAPTCHA