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

1 files changed, 7 insertions, 3 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'
+      });
+    }
   }
 });