From 3f7f3e0f4fe6877ffaac5bf0054ece2e8ba6e996 Mon Sep 17 00:00:00 2001
From: richard-loafle <44828666+richard-loafle@users.noreply.github.com>
Date: Tue, 11 Feb 2020 18:07:42 +0900
Subject: [PATCH] bug of scroll to bottom is fixed

---
 .../lib/components/messages.component.html    |  7 ++-
 .../lib/components/messages.component.scss    |  4 ++
 .../src/lib/components/messages.component.ts  | 47 ++++++++++++-------
 3 files changed, 40 insertions(+), 18 deletions(-)

diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html
index b6c5d898..9c8a0da5 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html
+++ b/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>
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.scss
index 684a8ad0..1d375809 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.scss
+++ b/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;
 }
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts
index 2a0a7e85..6a259953 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts
+++ b/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.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;
-    }
+    this.storedScrollItemOffsetTop = this.getOffsetTop();
   }
 
   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;
+  }
 }