Блокировка положения прокрутки при ленивой загрузке в бесконечном прокрутке (прокрутка вверх)

Question

У меня есть разговор/WhatsApp, как функция в моем приложении. Новые сообщения внизу, самые старые - наверху.

Когда я прокручусь вверху сообщений, он автоматически загружает больше, НО Я хочу сохранить положение прокрутки там, где оно есть. Я создал директиву, которая делает это, но проблема в том, что она мерцает. Кажется, что новые сообщения загружаются, а положение прокрутки сбрасывается в верхнюю часть. Затем моя директива ударяет и сбрасывает положение прокрутки туда, где она была. Так оно работает, но не выглядит великолепно.

У кого-нибудь есть подсказки, как это исправить?

HTML:

<div class="conversation-scroll-container" scroll-lock="{{ vm.isLoading }}"> 

VM (функция загрузки сообщений):

return this.messageService 
    .getMessages(conversation, dates) 
    .then(data => { 
     this.selectedConversation.applyNewMessages(data); 

     return data; 
    }) 
    .finally(() => { 
      this.isLoading = false; 
    }); 

И, наконец, директива (ее в TS):

export class ScrollLockDirective implements angular.IDirective { 
    public restrict = "A"; 
    private scrollLock = false; 
    private scrollLockOffset = 0; 

    constructor(private $timeout: angular.ITimeoutService) { } 

    static factory(): ng.IDirectiveFactory { 
     const directive = ($timeout: angular.ITimeoutService) => new ScrollLockDirective($timeout); 

     directive.$inject = ["$timeout"]; 

     return directive; 
    } 

    public link = (scope: angular.IScope, element: angular.IAugmentedJQuery, attributes: angular.IAttributes) => { 

     attributes.$observe("scrollLock",() => { 

      if (attributes["scrollLock"] === "true") { 
       this.scrollLock = true; 
      } 
      else { 
       this.doLockScroll(element); 
       this.scrollLock = false; 
      } 
     }); 

     element.bind("scroll",() => { 
      this.doLockScroll(element); 
     }); 

     scope.$on("$destroy",() => { 
      element.unbind("scroll"); 
     }); 
    } 

    private doLockScroll(element: angular.IAugmentedJQuery) { 

     if (this.scrollLock) { 
      this.$timeout(() => { 
       element.scrollTop(element[0].scrollHeight - this.scrollLockOffset); 
      }); 
     } else { 
      this.scrollLockOffset = element[0].scrollHeight - element.scrollTop(); 
     } 
    } 
} 

Answer 1

У меня была та же проблема, вы и я также пытались установить позицию scrollTop и т. д., но решение довольно просто: вам просто нужно отображать только новые элементы, вместо этого визуализировать все предметы.