Javascript 向上滚动

我想做一个功能，当用户向上滚动时自动显示项目。想想邮件，老邮件在上面，但我们从最新邮件的底部开始。我有另一个函数，在容器底部加载项目，这样做时，当前项目保持在原位，滚动条更小。我们没有滚动到底部。但是，在另一个方向，当我将项目预先添加到数组时，它会一直滚动到顶部，显示加载项目的顶部，而不是停留在同一位置，让用户根据需要向上滚动

底部滚动条的代码如下：

attachScrollWatcher: function (element, offset, callback) {

    console.log('scrolling');

    var contentHeight = element.scrollHeight;
    var yOffset = element.scrollTop;
    var y = yOffset + element.offsetHeight;

    if (y >= ( contentHeight - offset ))
    {
        callback();
    }
}

---

此函数附加到对象的

onscroll

事件。然而，现在我需要做一个相反的函数，向上。有什么办法可以实现吗？

类似的方法可能会奏效

attachScrollWatcher: function (element, offset, callback) {

console.log('scrolling');

var contentHeight = element.scrollHeight;
var yOffset = element.scrollTop;
var y = yOffset + element.offsetHeight;

if (y >= ( contentHeight - offset ))
{
    callback();
} else {
    callbackGoingUp();
}
}

---

基本上，当

scrollTop===0

时，您处于顶部，需要加载一个新项目

attachScrollWatcher: function (element, offset, callback) {
    if(!element.scrollHeight) callback();
}

问题是，加载一个新项目将使scrollTop保持为零，因此用户必须向下滚动然后向上滚动才能再次触发回调。因此，您要做的是在添加新项目之前计算scrollHeight，然后在添加项目之后再次计算scrollHeight，然后手动将scrollTop设置为原始和新scrollHeight之间的差值

查看下面我的示例

attachScrollListener

方法

class-upScroller{
构造函数（ele=document.body）{
this.renderItems=0；
这个。ele=ele；var i=0；
this.initBoxContents（）；
}
initBoxContents（）{
if（this.ele.scrollHeight==this.ele.clientHeight）
this.populateNextItem（）。然后（（）=>this.initBoxContents（））；
否则{
this.ele.scrollTop=this.ele.clientHeight；
this.attachScrollListener（）；
}
}
getNextItem（）{
//在此处执行某些操作以获取要渲染的下一项
//最好使用ajax，但我使用的是setTimeout
//来模拟ajax调用。
返回新承诺（完成=>setTimeout（（）=>{
这个.renderItems++；
完成（`这是第${This.renderItems}
`段）；
},50));
}
populateNextItem（）{
返回新承诺（完成=>{
this.getNextItem（）.then（项=>{
此.ele.insertAdjacentHTML（'afterbegin'，项）；
完成（）；
});
});
}
attachScrollListener（）{
this.ele.addEventListener（'scroll'，（）=>{
如果（this.ele.scrollTop）返回；
var sh=this.ele.scrollHeight；
this.populateNextItem（）。然后（（）=>{
this.ele.scrollTop=this.ele.scrollHeight-sh；
});
});
}
}
var poop=document.getElementById（'poop'）；
新upScroller（船尾）
#poop{高度：300px；溢出：自动；边框：1px纯黑；}
这是一个错误，因为我使用了scrollMonitor.js，它使用了一个滚动观察程序，但它不起作用，所以我尝试对它进行自定义，但最终自己编写了代码，尽管我的代码与一个不起作用的滚动观察程序无关，因为每次用户滚动时都会调用这个函数。所以，即使我现在在页面的中间，我向上滚动，用你的解决方案，它会加载新的项目，即使我只是在中间。@ M.MAR，我不完全理解你的问题，那么，你能把一个样本在JsFoDLE或类似的东西吗？