向上滚动

时间:2018-01-19 15:58:39

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

2 个答案:

答案 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 ....