Бесконечная прокрутка не работает при прокрутке до конца div - PullRequest
Новая
       50

Бесконечная прокрутка не работает при прокрутке до конца div

0 голосов
/ 30 октября 2018

Я пытаюсь сделать бесконечный свиток в своем чате. Я использую событие прокрутки, чтобы проверить, если scrolltop < clientHeight, и вызвать функцию loadMore, если это так. Это работает довольно хорошо, если вы никогда не прокручиваете до самого верха. Я сделал подарок, чтобы показать это (надеюсь, это имеет смысл):

enter image description here

Если у вас остается больше места для прокрутки при загрузке старых сообщений, вы сохраняете свое место, и полоса прокрутки опускается вниз.

Но если вы прокручиваетесь до самого верха, когда загружаются старые сообщения, полоса прокрутки остается закрепленной наверху, и вы теряете свое место (также прекращается запуск события прокрутки, поэтому вы прекращаете загрузку сообщений, если только вы не прокрутите немного вниз)

Кто-нибудь еще испытывал это? И что ты сделал, чтобы это исправить? Любой совет приветствуется. Спасибо!

1 Ответ

0 голосов
/ 30 октября 2018

обновлен ответ для поддержки 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>
...