3 files changed, 14 insertions, 15 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'
-    });
-  }
 }
diff --git a/app/views/game/finish_activity.js.erb b/app/views/game/finish_activity.js.erb
index f37c142..fa3d228 100644
--- a/app/views/game/finish_activity.js.erb
+++ b/app/views/game/finish_activity.js.erb
@@ -5,9 +5,13 @@ var outputHTML = "<%= j render(partial: "application/results", locals: { results
 
 if (resultOutputDiv) {
   resultOutputDiv.innerHTML += outputHTML;
-  resultOutputDiv.scrollTo({
-    top: resultOutputDiv.scrollHeight, left: 0, behavior: 'smooth'
-  });
+
+  // If scrolled to the bottom or near the bottom, then smooth scroll to the bottom.
+  if ((resultOutputDiv.scrollTop + 100) >= (resultOutputDiv.scrollHeight - resultOutputDiv.offsetHeight)) {
+    resultOutputDiv.scrollTo({
+      top: resultOutputDiv.scrollHeight, left: 0, behavior: 'smooth'
+    });
+  }
 }
 
 if (resultControlsDiv) {