From 66420c62b2e75289b7e56896fcc22a1dd3e61c98 Mon Sep 17 00:00:00 2001
From: supertiger1234 <saawalkhn123@googlemail.com>
Date: Fri, 9 Aug 2019 20:24:54 +0100
Subject: [PATCH] Fixed issues with auto scroll.

---
 src/components/app/MessagePanel.vue | 54 ++++++++++++-----------------
 1 file changed, 22 insertions(+), 32 deletions(-)

diff --git a/src/components/app/MessagePanel.vue b/src/components/app/MessagePanel.vue
index 7ced781..8ff13b0 100644
--- a/src/components/app/MessagePanel.vue
+++ b/src/components/app/MessagePanel.vue
@@ -9,7 +9,7 @@
     <div class="loading" v-if="selectedChannelID && !selectedChannelMessages">
       <spinner/>
     </div>
-    <div v-else-if="selectedChannelID" ref="msg-logs" class="message-logs" >
+    <div v-else-if="selectedChannelID" ref="msg-logs" class="message-logs" @scroll="scrollEvent">
       <div class="scroll">
         <message
           class="message-container"
@@ -123,7 +123,8 @@ export default {
       typingTimer: null,
       typing: false,
       typingRecipients: {},
-      showEmojiPanel: false
+      showEmojiPanel: false,
+      scrolledDown: true,
     };
   },
   methods: {
@@ -257,7 +258,7 @@ export default {
       } else {
         input.style.height = "auto";
         input.style.height = `calc(${input.scrollHeight}px - 1em)`;
-        this.scrollDown(false, undefined, input.scrollHeight);
+        this.scrollDown();
 
       }
     },
@@ -454,14 +455,15 @@ export default {
         });
       }
     },
-    scrollDown(ignoreScrolledDown, el, minScroll = 100) {
-      const element = el || this.$refs['msg-logs'];
+    scrollEvent(event) {
+      const { currentTarget: { scrollTop, clientHeight, scrollHeight} } = event;
+      this.scrolledDown = Math.abs(scrollHeight - scrollTop - clientHeight) <= 3.0;
+    },
+    scrollDown() {
+      if (!this.scrolledDown) return;
+      const element = this.$refs['msg-logs']
       if (!element) return;
-      const currentScroll = element.scrollHeight - element.scrollTop; 
-      const total = element.clientHeight;
-      if ( ignoreScrolledDown || ( currentScroll <= total + minScroll ) ){
-        element.scrollTop = element.scrollHeight;
-      }
+      element.scrollTop = element.scrollHeight;
     },
     onResize(dimentions) {
       this.scrollDown();
@@ -497,7 +499,7 @@ export default {
         2500
       );
     };
-    this.scrollDown(true);
+    this.scrollDown();
 
     bus.$on("newMessage", this.hideTypingStatus);
     bus.$on("emojiSuggestions:Selected", this.enterEmojiSuggestion);
@@ -520,33 +522,21 @@ export default {
     delete this.$options.sockets.typingStatus;
   },
   watch: {
-    selectedChannelMessages(newMessages, oldMessages){
-      let element = this.$refs['msg-logs'];
-      let currentScroll;
-      let total;
-      if (element) {
-        currentScroll = element.scrollHeight - element.scrollTop
-        total = element.clientHeight
-      }
+    scrolledDown(v) {
 
+      
+    },
+    selectedChannelMessages(newMessages, oldMessages){
       this.$nextTick(function () {
-        if (oldMessages === undefined) {
-          this.scrollDown(true);
-        } else {
-          if (currentScroll === total) {
-            this.scrollDown(true);
-          }
-        }
+        this.scrollDown();
       })
     },
+    selectedChannelID(){
+      this.scrolledDown = true;
+    },
     uploadQueue() {
-      let element = this.$refs['msg-logs'];
-      let currentScroll = element.scrollHeight - element.scrollTop;
-      let total = element.clientHeight;      
       this.$nextTick(function () {
-        if (currentScroll === total) {
-          this.scrollDown(true);
-        }
+        this.scrollDown(true);
       })
     },
     editMessage(editMessage) {