我想创建一个在用户向上滚动时自动显示项目的功能。想想消息,旧的消息是最重要的,但我们从最新的消息开始。我有另一个函数加载容器底部的项目,并且当它这样做时,当前项目保持在原位,滚动条更小。我们不会滚动到底部。但是,在另一个方向上,当我将项目添加到数组时,它会一直滚动到顶部,显示已加载项目的顶部,而不是保留在同一位置,让用户根据需要向上滚动。
底部滚动的代码是:
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
事件。但是,现在我需要创建一个相反的功能,向上运行。任何想法如何实现?
答案 0 :(得分:0)
这样的事情可能有用。
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();
}
}
答案 1 :(得分:0)
基本上,当scrollTop === 0
时,你就在顶部,你需要加载一个新项目..
attachScrollWatcher: function (element, offset, callback) {
if(!element.scrollHeight) callback();
}
问题是,加载一个新项目会使scrollTop保持为零,因此用户必须向下滚动然后向上滚动才能再次触发回调。所以,你想要做的是在添加新项目之前计算scrollHeight,然后在添加项目之后再次计算,然后手动将scrollTop设置为原始scrollHeight和新scrollHeight之间的差异。
查看下面的示例attachScrollListener
方法...
class upScroller{
constructor(ele = document.body){
this.renderedItems = 0;
this.ele = ele; var i=0;
this.initBoxContents();
}
initBoxContents(){
if(this.ele.scrollHeight == this.ele.clientHeight)
this.populateNextItem().then(()=>this.initBoxContents());
else{
this.ele.scrollTop = this.ele.clientHeight;
this.attachScrollListener();
}
}
getNextItem(){
// Do something here to get the next item to render
// preferably using ajax but I'm using setTimeout
// to emulate the ajax call.
return new Promise(done=>setTimeout(()=>{
this.renderedItems++;
done(`<p>This is paragraph #${this.renderedItems}</p>`);
},50));
}
populateNextItem(){
return new Promise(done=>{
this.getNextItem().then(item=>{
this.ele.insertAdjacentHTML('afterbegin', item);
done();
});
});
}
attachScrollListener(){
this.ele.addEventListener('scroll', ()=>{
if(this.ele.scrollTop) return;
var sh = this.ele.scrollHeight;
this.populateNextItem().then(()=>{
this.ele.scrollTop = this.ele.scrollHeight - sh;
});
});
}
}
var poop = document.getElementById('poop');
new upScroller(poop);
#poop{ height: 300px; overflow: auto; border:1px solid black;}
<div id=poop></div>
我也发布了这个here ....