Detecting the end of wheel event JavaScript without jQuery

Question

I have my code, and I cannot understand how can I detect end of scroll (when it gets to the bottom of the element).

document.getElementById('list').addEventListener('wheel', function () {
    function load() {
       var fragment = document.createDocumentFragment();

        for (var i = 0; i < 10; i++) {
            var p = document.createElement('p');
            p.appendChild(document.createTextNode(i));
            fragment.appendChild(p);
       }
       return fragment;
     }

      // if ( scroll end ) { load new content 
         this.appendChild(load());
      //} 
  }, false);

Is there any best practice/algorithm for this task?

What do you mean by "end of scroll"? AHHH, you mean when it gets to the bottom of the element... — epascarello, Jul 03 '14 at 16:56
possible duplicate of [How do I know when I've stopped scrolling Javascript](http://stackoverflow.com/questions/4620906/how-do-i-know-when-ive-stopped-scrolling-javascript) — Patrick Evans, Jul 03 '14 at 16:59

score 1 · Accepted Answer · answered Jul 03 '14 at 17:54

Ok, i get what you wanted to achieve now...

so basically, there are those two properties .scrollHeight which is the height of the content in a scrollable element, and .scrollTop which returns the current scroll position of the scrollable content.

when you scroll to the end of the scrollable element, its scrolltop + height will be equal to its scrollheight, so your condition should look like this:

var myList = document.getElementById('list');
if (myList.scrollTop + myList.offsetHeight == myList.scrollHeight) {
    this.appendChild(load());
}

here is your Fixed Fiddle

Detecting the end of wheel event JavaScript without jQuery

1 Answers1