javascript - 动态 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;

演示

---

但

如果你想将滚动处理程序设置为divwith 然后试试这个：

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

工作样本​</p>

---

更新您的代码

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;​

​工作 样本

Answer 2

您应该替换以下行：

div.onscroll = yHandler;

对于这个：

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

那会做你想做的事。