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

4 files changed, 18 insertions, 15 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e832c89..8e99480 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -21,6 +21,10 @@ All notable changes to this project will be documented in this file.
   - Pure iron ingot 90 -> 70
   - Arcanite ingot 100 -> 80
   
+### UI
+- Chat and result output both now only scroll to the bottom on a new message when they are already scrolled to the
+  bottom or near the bottom.
+  
 ### Fixed
 - Leviathans that had item drops with a less than 100% chance could fail to check all their items due to the awarding
   code returning early. This wouldn't have happened in the game yet because prior to this patch there were no item
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) {