dynamic div not firing

Question

I'm trying to create a dynamic scroll in my div where data can keep loading before I get to the bottom of the div. I fairly wet behind the ears and am not sure as to if I'm looking at this the right way, because my code is not firing at all. Any guidance will be greatly appreciated

function  yHandler (){
    var movelist = document.getElementById('movelist');
    //turning div into an object
    var contentHeight = movelist.offsetHeight;
    //gets page content height, this so you know how much vetical pixel height you
    //have on the page
    var yOffset = movelist.pageYoffset;
    //get vertical scroll position, lets you know where the user is in their scroll
    //postion
    var y = yOffset + movelist.innerHeight;
    //getting inner height of div
    if(y >= contentHeight){
    //if the user scrolls to the bottom. If user goes over or hits it
        movelist.innerHTML += '<div class ="newData">hey look at me</div>';

    }

}

div.onscroll = yHandler;

//listening and will fire off yHandler whenever the div is scrolled up or down

Answer 1

Instead of

div.onscroll = yHandler;

try

window.onscroll = yHandler;

Demo

---

But

if you want to set scroll handler to the div with then try this:

/*
 *  Keep reference of div id=movelist
 *  out of yHandler method
 */

var movelist = document.getElementById('movelist'); 
function yHandler() {
    var contentHeight = movelist.offsetHeight;
    var yOffset = movelist.pageYoffset;
    var y = yOffset + movelist.innerHeight;
    if (y >= contentHeight) {
        movelist.innerHTML += '<div class ="newData">hey look at me</div>';
    }
}

// handler to div with id=movelist
movelist.onscroll = yHandler;

Working sample​

---

Update to your code

var movelist = document.getElementById('movelist');

function yHandler() {
    var contentHeight = movelist.scrollHeight;
    var yOffset = movelist.clientHeight;
    var y = yOffset + movelist.scrollTop;
    if (y >= contentHeight) {
        movelist.innerHTML += '<div class ="newData">hey look at me</div>';
    }
}

movelist.onscroll = yHandler;​

​ Working sample

Answer 2

You should replace your following line:

div.onscroll = yHandler;

for this one:

$(window).bind("scroll", yHandler);

that would do what you want.