Question

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

底部滚动的代码是：

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事件。但是，现在我需要创建一个相反的功能，向上运行。任何想法如何实现？

Answer 1

这样的事情可能有用。

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();
}
}

Answer 2

基本上，当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 ....

向上滚动

2 个答案: