bug of scroll to bottom is fixed

projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html

@@ -87,5 +87,10 @@
   fxFlexFill
   class="chat-messages-buffer-container disappear"
 >
-  <div #chatMessagesBuffer fxFlexFill class="chat-messages-buffer"></div>
+  <div
+    #chatMessagesBuffer
+    fxFlexFill
+    perfectScrollbar
+    class="chat-messages-buffer"
+  ></div>
 </div>

projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.scss

@@ -160,6 +160,10 @@ $tablet-l-width: 1024px;
   opacity: 0 !important;
 }
 
+.show {
+  opacity: 1 !important;
+}
+
 .disappear {
   display: none !important;
 }

projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts

@@ -120,6 +120,9 @@ export class MessagesComponent implements OnInit, OnDestroy {
   @ViewChild('chatMessagesBufferContainer', { static: false })
   chatMessagesBufferContainer: ElementRef<HTMLElement>;
 
+  @ViewChildren(PerfectScrollbarDirective)
+  psDirectiveRefList: QueryList<PerfectScrollbarDirective>;
+
   @ViewChild(VirtualScrollerComponent, { static: false })
   private virtualScroller: VirtualScrollerComponent;
 
@@ -404,22 +407,7 @@ export class MessagesComponent implements OnInit, OnDestroy {
   }
 
   storeScrollPosition() {
-    this.storedScrollItem = this.eventList[
+    this.storedScrollItemOffsetTop = this.getOffsetTop();
-      this.virtualScroller.viewPortInfo.startIndex
-    ];
-
-    const chatMessageBox = this.chatMessageBoxList.find(
-      el =>
-        el.message.seq ===
-        this.eventList[this.virtualScroller.viewPortInfo.startIndex].seq
-    );
-    if (!!chatMessageBox) {
-      this.storedScrollItemOffsetTop =
-        chatMessageBox.offsetTop -
-        this.virtualScroller.viewPortInfo.scrollStartPosition;
-    } else {
-      this.storedScrollItemOffsetTop = 0;
-    }
   }
 
   swapScrollTo(
@@ -457,11 +445,19 @@ export class MessagesComponent implements OnInit, OnDestroy {
 
   preSwapScroll(useHide: boolean, useSwap: boolean) {
     if (useSwap && !this.swapped) {
+      this.chatMessagesBufferContainer.nativeElement.classList.add('hide');
+
       this.chatMessagesBuffer.nativeElement.innerHTML = this.chatMessagesContainer.nativeElement.innerHTML;
-      this.chatMessagesBuffer.nativeElement.scrollTop = this.chatMessagesContainer.nativeElement.scrollTop;
       this.chatMessagesBufferContainer.nativeElement.classList.remove(
         'disappear'
       );
+
+      this.chatMessagesBuffer.nativeElement.scrollTop = this.virtualScroller[
+        // tslint:disable-next-line: no-string-literal
+        'element'
+      ].nativeElement.scrollTop;
+      this.chatMessagesBufferContainer.nativeElement.classList.remove('hide');
+
       this.swapped = true;
     }
 
@@ -702,4 +698,21 @@ export class MessagesComponent implements OnInit, OnDestroy {
     item2: Info<EventJson>
     // tslint:disable-next-line: semicolon
   ): boolean => !!item1 && !!item2 && item1.seq === item2.seq;
+
+  private getOffsetTop(): number {
+    this.storedScrollItem = this.eventList[
+      this.virtualScroller.viewPortInfo.startIndex
+    ];
+
+    const chatMessageBox = this.chatMessageBoxList.find(
+      el =>
+        el.message.seq ===
+        this.eventList[this.virtualScroller.viewPortInfo.startIndex].seq
+    );
+
+    return !!chatMessageBox
+      ? chatMessageBox.offsetTop -
+          this.virtualScroller.viewPortInfo.scrollStartPosition
+      : 0;
+  }
 }