無限スクロールで遅延読み込み時にスクロール位置を固定する（スクロールアップ）

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の位置などを設定しようとしましたが、ソリューションは非常にシンプルです：新しいアイテムだけをレンダリングし、代わりにすべてのアイテムをレンダリングします。