动态div没有开火

Question

我正在尝试在div中创建动态滚动，在我到达div的底部之前数据可以继续加载。我在耳朵后面相当湿润，并且不确定我是否正确地看着这个，因为我的代码根本没有触发。任何指导将不胜感激

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;

//监听并在div向上或向下滚动时触发yHandler

Answer 1

而不是

div.onscroll = yHandler;

试

window.onscroll = yHandler;

的 Demo 的

---

但是

如果您想将滚动处理程序设置为div，请尝试以下操作：

/*
 *  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 的

---

更新代码

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

您应该替换以下行：

div.onscroll = yHandler;

这个：

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

可以做你想做的事。