From 779f19c5b35f7c8c7690dac9fbf4606f49cfffde Mon Sep 17 00:00:00 2001
From: David Gay <david@davidgay.org>
Date: Wed, 9 Jun 2021 21:49:46 -0400
Subject: Only scroll chat and results output to the bottom on new content when
 already scrolled to the bottom or near the bottom

---
 app/javascript/channels/chat_room_channel.js  | 10 +++++++---
 app/javascript/controllers/chat_controller.js |  9 ---------
 2 files changed, 7 insertions(+), 12 deletions(-)

(limited to 'app/javascript')

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'
-    });
-  }
 }
-- 
cgit v1.2.3