javascript - Auto scroll when Item added to chatroom div unless scrolling Rails 6.1.0 Turbo

Question

I'm having an issue where my setInterval function is continuing to run when a user is scrolling up to review old messages. I would like to stop auto-scrolling to the bottom when a user is scrolling up to review old messages. The setInterval function should only fire when a new message is added inside of the div container. I tried multiple approaches & none seem to give me a smooth effect that allows both scrolling and auto-scrolling when an item has been added to the view. I am using Turbo for Rails 6.1.0, but I don't think its necessary to use Turbo for this particular issue. I simply want new messages to appear the bottom and the ability to review old messages with scrolling. How can I get a smooth transition of new messages to appear and allow the user to scroll inside of the div?

index.html

<div class="col-6">
      <% if @conversation.present? %>
        <%= turbo_stream_from @conversation %>
        <div class="chat-room">
          <%= turbo_frame_tag "conversation" do %>
          <div class="text-center chat-room-title">
            <h5 class="text-light-charcoal"><%= @conversation.title %></h5>
          </div>
          <% end %>
          <div id="conversation_comments">
            <%= render @conversation.conversation_comments %>
          </div>
          <div class="chat-box">
            <%= turbo_frame_tag 'new_conversation_conversation_comment', src: new_conversation_conversation_comment_path(@conversation), target: "_top" %>
          </div>
        </div>
      <% end %>
    </div>

JavaScript

<script>
  $('#conversation_comments').animate({scrollTop: 20000000}, "slow");

  const msgs = document.getElementById('conversation_comments');

  function getMessages() {
      // Prior to getting your messages.
      shouldScroll = msgs.scrollTop + msgs.clientHeight === msgs.scrollHeight;

      // After getting your messages.
      if (!shouldScroll) {
          scrollToBottom();
      }
  }

  function scrollToBottom() {
      msgs.scrollTop = msgs.scrollHeight;
  }

  scrollToBottom();

  setInterval(getMessages, 2000);
</script>

CSS

.chat-room  {
  height: 74vh;
  border-left: 1px #d0cdcd solid;
  border-right: 1px #d0cdcd solid;
  background: whitesmoke;

  #conversation_comments {
    height: 69vh;
    overflow-y: scroll;
    padding-top: 20px;
    padding-left: 5px;
  }

  .conversation-comment {
    min-height: 59px;
  }
}

.chat-box {
  -ms-flex-align: stretch;
  -ms-flex-direction: column;
  -ms-flex-negative: 0;
  -ms-flex-preferred-size: auto;
  -webkit-align-items: stretch;
  -webkit-box-align: stretch;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -webkit-flex-basis: auto;
  -webkit-flex-direction: column;
  -webkit-flex-shrink: 0;
  align-items: stretch;
  box-sizing: border-box;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-basis: auto;
  flex-direction: column;
  flex-shrink: 0;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  min-height: 0px;
  min-width: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0px;
  position: relative;
  z-index: 0;
}

question from:https://stackoverflow.com/questions/65872328/auto-scroll-when-item-added-to-chatroom-div-unless-scrolling-rails-6-1-0-turbo

Answer 1

Waitting for answers