javascript - 当一直滚动到 div 末尾时，无限滚动不起作用

Question

我正在尝试在聊天中无限滚动。我正在使用滚动事件来检查 scrolltop < clientHeight 是否并调用函数loadMore如果是。只要您从不滚动到最顶部，这种方法就非常有效。我制作了一个 gif 来展示这一点(希望它有意义):

如果在加载较旧的消息时您仍有更多滚动空间，则您可以保留自己的位置，并且滚动条会被按下。

但是，如果您在加载较旧的消息时一直滚动到顶部，则滚动条将保持固定在顶部，并且您会失去位置(滚动事件也会停止触发，因此您将停止加载消息，除非您向下滚动一点)

还有其他人经历过这种情况吗？你做了什么来解决这个问题？任何建议表示赞赏。谢谢!

Answer 1

更新了答案以支持 2 个方向(向上或向下)和加载填充。请在展开模式下运行代码片段，内联预览框架对于可滚动列表来说太小。

var isLoadingAlready = false;
var upDirection = true; // to load records on top of the list; false to load them to the end of the list
var loadThreshold = 100; // distance to the edge (in pixels) to start loading
var howManyDataLoadsAvailable = 5;

if (upDirection){
    $('.scroll')[0].scrollTop = 100000; // scrolling all the way down
    $('.scroll').css('paddingTop', loadThreshold);
} else {
    $('.scroll').css('paddingBottom', loadThreshold);
}

$('.scroll').on('scroll', function () {
    var s = this; // picking DOM element

    if (s) { // just to be sure/safe
        var scrollableHeight = s.scrollHeight - s.clientHeight;
        if (scrollableHeight > 0) {
            var scrollTop = s.scrollTop;
            var distToTheEdge = upDirection?scrollTop:scrollableHeight - scrollTop;
            if (distToTheEdge < loadThreshold && !isLoadingAlready) {
                isLoadingAlready = true;
                loadMoreRecords(function () { // assuming you have a callback to allow next loading
                    isLoadingAlready = false;
                });
            }
        }
    }
});

loadMoreRecords();

function loadMoreRecords(doneCallback){
    $('.scroll').addClass('loading');

    // simulating the actual loading process with setTimeout
    setTimeout(function(){
        // simulated items to insert:
        var items = [];
        if (howManyDataLoadsAvailable-- > 0){
            for (var i = 0; i < 10; i++){
                items.push($('<li>').text('msg: '+(i+1)+', parts left: '+howManyDataLoadsAvailable));
            }
        }

        var $se = $('.scroll'); // scrollable DOM element
        var $ul = $('.scroll ul');
        var se = $se[0];
        if (upDirection) {
            var hBefore = $ul.height();
            $ul.prepend(items);
            var hDiff = $ul.height() - hBefore;
            se.scrollTop = Math.max(hDiff, loadThreshold);
        } else {
            $ul.append(items);
            se.scrollTop = se.scrollHeight - se.clientHeight - Math.max(se.scrollHeight - se.clientHeight - se.scrollTop, loadThreshold);
        }
        $se.removeClass('loading');
        if (typeof(doneCallback) === 'function'){
            doneCallback();
        }
    }, 500);
}

.scroll{
  overflow-y: auto;
  max-height: 200px;
  border: 2px dashed #aaa;
  padding: 0.5em;
  margin: 1em;
}
.scroll.loading{
  background-color: #f5f5f5;
}

ul{
  list-style: none;
  padding: 0;
}

li{
  padding: 0.5em;
  border: 1px solid #eee;
  border-radius: 0.5em;
  margin: 0.2em;
  animation: colorchange 1200ms;
  background: white;
  box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.05);
}


@keyframes colorchange
{
  0%   {background: #def;}
  100% {background: white;}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="scroll">
  <ul></ul>
</div>