diff options
| -rw-r--r-- | CHANGELOG.md | 6 | ||||
| -rw-r--r-- | app/javascript/channels/chat_room_channel.js | 11 | ||||
| -rw-r--r-- | app/views/game/finish_activity.js.erb | 10 |
3 files changed, 22 insertions, 5 deletions
diff --git a/CHANGELOG.md b/CHANGELOG.md index 115a130..16a9213 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,12 @@ # Changelog All notable changes to this project will be documented in this file. +## [Unreleased] + +### Fixed +- Results and chat areas sometimes didn't scroll to bottom when they should. This was caused by large result outputs + being larger than the scroll tolerance. + ## [0.1.11.3] - 2021-06-22 ### UI diff --git a/app/javascript/channels/chat_room_channel.js b/app/javascript/channels/chat_room_channel.js index af29953..514742f 100644 --- a/app/javascript/channels/chat_room_channel.js +++ b/app/javascript/channels/chat_room_channel.js @@ -10,14 +10,19 @@ consumer.subscriptions.create("ChatRoomChannel", { }, received(data) { + // If scrolled to the bottom or near the bottom, then smooth scroll to the bottom. + var shouldScroll = false; + var chatOutputElement = document.getElementById("chat_output"); + if ((chatOutputElement.scrollTop + 100) >= (chatOutputElement.scrollHeight - chatOutputElement.offsetHeight)) { + shouldScroll = true; + } + // Called when there's incoming data on the websocket for this channel var node = document.createElement("P"); node.innerHTML = data.html; - var chatOutputElement = document.getElementById("chat_output"); chatOutputElement.appendChild(node); - // If scrolled to the bottom or near the bottom, then smooth scroll to the bottom. - if ((chatOutputElement.scrollTop + 100) >= (chatOutputElement.scrollHeight - chatOutputElement.offsetHeight)) { + if (shouldScroll) { chatOutputElement.scrollTo({ top: chatOutputElement.scrollHeight, left: 0, behavior: 'smooth' }); diff --git a/app/views/game/finish_activity.js.erb b/app/views/game/finish_activity.js.erb index fa3d228..f281986 100644 --- a/app/views/game/finish_activity.js.erb +++ b/app/views/game/finish_activity.js.erb @@ -4,10 +4,16 @@ var resultControlsDiv = document.getElementById("activity_controls"); var outputHTML = "<%= j render(partial: "application/results", locals: { results: @results }) %>" if (resultOutputDiv) { - resultOutputDiv.innerHTML += outputHTML; - // If scrolled to the bottom or near the bottom, then smooth scroll to the bottom. + // (Check before adding output, because a large output could prevent the scroll when it shouldn't.) + var shouldScroll = false; if ((resultOutputDiv.scrollTop + 100) >= (resultOutputDiv.scrollHeight - resultOutputDiv.offsetHeight)) { + shouldScroll = true; + } + + resultOutputDiv.innerHTML += outputHTML; + + if (shouldScroll) { resultOutputDiv.scrollTo({ top: resultOutputDiv.scrollHeight, left: 0, behavior: 'smooth' }); |