How to do an infinite scroll in plain Javascript

Question

I want to avoid using jQuery or another library for the sake of keeping my code minimal, I need very little in the way of features, I just want to append to a list when the user scrolls to the bottom. How would I do this in plain Javascript?

Keeping your code minimal and avoiding a library such as jQuery seem like goals that are at odds with one another, to be perfectly honest. So why the desire not to use one? — Anthony Grist, Jun 23 '11 at 15:50
If you're worried about using a huge framework like jQuery to achieve this simple effect consider using a micro framework you can find a good list at microjs.com. Achieving pure js infinite scroll that is also cross platform compatible is going to be quite difficult. — JaredMcAteer, Jun 23 '11 at 15:56
@Anthony Grist: jQuery is not always good choice: if you are good at javascript, you are able to write better code in particular situation; if you are NOT good at it, you write worse code with some framework than without it. In conclusion, jQuery is good only for closed solutions like lightbox or in case you do not have time/money for thinking out. I think this one is not the case. — Jan Turoň, Jun 23 '11 at 16:02
Are you lookin something like this: http://jsfiddle.net/rathoreahsan/LAR7w/ — Ahsan Rathod, Jun 23 '11 at 16:08
I want to avoid a library because this is not a website - its a Firefox addon that creates a page, I want to avoid it because I've managed to do a lot so far. To add specificity to the problem, you can assume this is Firefox 4+ we're talking about — Abhinav Sharma, Jun 23 '11 at 16:15
@Anthony: In this case he means to minimize the total amount of code, not the amount of code he has to write. — Gabe, Jun 23 '11 at 16:43

Jan Turoň · Answer 1 · 2015-03-22T21:58:16.367

Basicaly you just need to hook the event scroll, check if the user scrolled down enough and add some content if so:

<html><body>
<div id="test">scroll to understand</div>
<div id="wrapper" style="height: 400px; overflow: auto;">
  <div id="content"> </div>
</div>

<script language="JavaScript">
  // we will add this content, replace for anything you want to add
  var more = '<div style="height: 1000px; background: #EEE;"></div>';

  var wrapper = document.getElementById("wrapper");
  var content = document.getElementById("content");
  var test = document.getElementById("test");
  content.innerHTML = more;

  // cross browser addEvent, today you can safely use just addEventListener
  function addEvent(obj,ev,fn) {
    if(obj.addEventListener) obj.addEventListener(ev,fn,false);
    else if(obj.attachEvent) obj.attachEvent("on"+ev,fn);    
  }

  // this is the scroll event handler
  function scroller() {
    // print relevant scroll info
    test.innerHTML = wrapper.scrollTop+"+"+wrapper.offsetHeight+"+100>"+content.offsetHeight;

    // add more contents if user scrolled down enough
    if(wrapper.scrollTop+wrapper.offsetHeight+100>content.offsetHeight) {
      content.innerHTML+= more;
    }
  }

  // hook the scroll handler to scroll event
  addEvent(wrapper,"scroll",scroller);
</script>
</body></html>

Thanks, I'll try it out, something else I noticed that seems to work (at least at prelim testing) is testing comparing window.scrollY against window.scrollMaxY, I don't know about its cross-browser compatibility though. — Abhinav Sharma, Jun 23 '11 at 17:02
window.scrollMaxY is not cross-browser. On [quirksmode](http://www.quirksmode.org/dom/w3c_cssom.html) there is some compatibility research. — Jan Turoň, Jun 23 '11 at 17:50

score 9 · Answer 2 · edited Feb 16 '21 at 21:53

9

For achieving this behaviour you don't need jQuery or a jQuery plugin. You can use only CSS or JavaScript (if you want to cover all browsers).

But don't use onScroll: you can do all of this with just vanilla JS and the Intersection Observer API.

All you need to do is place elements and listen for when they become available in the screen. The Intersection Observer API is very customisable to fit all your needs.

In summary: you accomplish that with a few JavaScript & HTML lines and it's much more performant than listening for scroll events in the browser.

edited Feb 16 '21 at 21:53

ggorlen

44,755
7
76
106

answered Dec 25 '20 at 10:24

Jose Greinch

394
2
13

Very interesting answer, a working example would be nice. I found this one online: https://dev.to/trex777/infinite-scrolling-using-intersection-observer-api-118l – luca.vercelli Feb 13 '23 at 15:57

score 6 · Answer 3 · edited Dec 11 '20 at 17:33

Excellent demo code for infinite scroll. Goes to show that you don't need jQuery and Angular for any browser independent work. But new boys today are out of touch with pure Javascript that we old guys still trust and use. Here I have simplified the code further:

// we will add this content, replace for anything you want to add
var wrapper, content, test;
var more = '<div style="height:1000px; background:#EEE;"></div>';

// this is the scroll event handler
function scroller() {
  // print relevant scroll info
  test.innerHTML = wrapper.scrollTop + " + " + wrapper.offsetHeight + " + 100 > " + content.offsetHeight;

  // add more contents if user scrolled down enough
  if (wrapper.scrollTop + wrapper.offsetHeight + 100 > content.offsetHeight) {
    content.innerHTML += more; // NK: Here you can make an Ajax call and fetch content to append to content.innerHTML
  }
}

wrapper = document.getElementById("wrapper");
content = document.getElementById("content");
test = document.getElementById("test");

content.innerHTML = more;

// hook the scroll handler to scroll event
if (wrapper.addEventListener) // NK: Works on all new browsers
  wrapper.addEventListener("scroll", scroller, false);

else if (wrapper.attachEvent) // NK: Works on old IE
  wrapper.attachEvent("onscroll", scroller);

<div id="test">scroll to understand</div>

<div id="wrapper" style="height: 400px; overflow: auto;">
  <div id="content"> </div>
</div>

score 1 · Answer 4 · answered Aug 27 '19 at 19:46

I see great answers to your question, but for a scrolling that is not associated with any HTML element or content (just an empty HTML page), here is how I did it:

document.querySelector("body").style.height = "1000px";

window.addEventListener("scroll", function() {
    var body = document.querySelector("body");
    var height = body.style.height;
    height = height.slice(0, -2);
    height = Number(height);
    return function() {
        if(height - window.scrollY < 700) {
            height += height / 2;
        }
        body.style.height = height + "px";
    };
}());

<!DOCTYPE html>
<html>
<head>

</head>
<body>

</body>
</html>

I hope this helps someone out there :)

score 1 · Answer 5 · answered Jun 23 '11 at 16:36

1

domElem.addEventListener(
        'scroll',
        function(evt) { ... },
        false
    );

and handle evt/scroll position appropriately.

answered Jun 23 '11 at 16:36

c-smile

26,734
7
59
86

1

@Jan Turoň: The question is about Firefox. – Wladimir Palant Jun 23 '11 at 17:00

Okiemute Gold · Answer 6 · 2021-12-07T09:43:52.627

Assume HTML:

<div class="container"></div>

let container = document.querySelector('.container');

// when user scrolls to last list item in view, wait for 1.5seconds and load next 10 list items, and continue thus.
window.addEventListener('scroll', function(){
  setTimeout(() => {
    loadMoreList(5);
  }, 1500);
});

loadMoreList(20); // load first 20 list items.

function loadMoreList(num) {
  let scrollY = window.scrollY;
  let innerHeight = window.innerHeight;
  let offsetHeight = document.body.offsetHeight;
  
  if (scrollY + innerHeight > offsetHeight - 100) {
    let item = 1;
    let ul = document.createElement('ul');
    
    for (var i = 0; i < num; i++) {
      let li = document.createElement('li');
      li.innerText = 'List Item ' + item++;

      ul.appendChild(li);
      container.appendChild(ul);
    }
  }
}

Note: The more important parts are: the scroll event listener and the loadMoreList function. You don't necessarily need the argument num.
The for loop just ensures that on load, the function is called and 20 items are uniquely created and displayed.

How to do an infinite scroll in plain Javascript

6 Answers6

Linked

Related