Only scroll chat and results output to the bottom on new content when already scrolled to the bottom or near the bottom

2 files changed, 7 insertions, 12 deletions

diff --git a/app/javascript/channels/chat_room_channel.js b/app/javascript/channels/chat_room_channel.js
index 8dfa47f..af29953 100644
--- a/app/javascript/channels/chat_room_channel.js
+++ b/app/javascript/channels/chat_room_channel.js
@@ -15,8 +15,12 @@ consumer.subscriptions.create("ChatRoomChannel", {
     node.innerHTML = data.html;
     var chatOutputElement = document.getElementById("chat_output");
     chatOutputElement.appendChild(node);
-    chatOutputElement.scrollTo({
-      top: chatOutputElement.scrollHeight, left: 0, behavior: 'smooth'
-    });
+
+    // If scrolled to the bottom or near the bottom, then smooth scroll to the bottom.
+    if ((chatOutputElement.scrollTop + 100) >= (chatOutputElement.scrollHeight - chatOutputElement.offsetHeight)) {
+      chatOutputElement.scrollTo({
+        top: chatOutputElement.scrollHeight, left: 0, behavior: 'smooth'
+      });
+    }
   }
 });
diff --git a/app/javascript/controllers/chat_controller.js b/app/javascript/controllers/chat_controller.js
index d9cf1cb..95b61c5 100644
--- a/app/javascript/controllers/chat_controller.js
+++ b/app/javascript/controllers/chat_controller.js
@@ -12,7 +12,6 @@ export default class extends Controller {
     // TODO: Temporary hack. Should just run this after default event.
     setTimeout(function() {
       vm.messageTarget.value = "";
-      vm.smoothScrollToBottom();
     }, 100);
   }
 
@@ -31,12 +30,4 @@ export default class extends Controller {
   scrollToBottom() {
     this.outputTarget.scrollTop = this.outputTarget.scrollHeight;
   }
-
-  smoothScrollToBottom() {
-    this.outputTarget.scrollTo({
-      top: this.outputTarget.scrollHeight,
-      left: 0,
-      behavior: 'smooth'
-    });
-  }
 }