<%= turbo_stream_from @conversation %>
        <div class="chat-room" id="chat-room-container">
          <%= turbo_frame_tag "conversation" do %>
      .................
          <% end %>
          <div class="convo-comments-container-<%= @conversation.id %>" id="conversation_comments">
            <%= render @conversation.conversation_comments %>
          </div>
        </div>
        <div class="chat-box">
          <%= turbo_frame_tag 'new_conversation_conversation_comment', src: new_conversation_conversation_comment_path(@conversation), target: "_top" %>
        </div>

  $('#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);

  document.addEventListener("turbo:render", function (){
      getMessages();
  });
</script>

<div data-controller="smart-scroll"
data-action="smart-scroll:added->smart-scroll#handleAdded 
 resize->smart-scroll#handleAdded 
 scroll->smart-scroll#handleScroll">
<div data-controller="smart-scroll-item">
 aya: an an
</div>
<div data-controller="smart-scroll-item">
 hatate: ni hao
</div>
<!-- add more smart-scroll-item dynamically... -->
</div>

import { Controller } from 'stimulus'
import Rails from 'rails-ujs'

const observer = new ResizeObserver(entries => {
for (let entry of entries) {
Rails.fire(entry.target, 'resize')
}
})

export default class extends Controller {
connect() {
observer.observe(this.element)
this.shouldScroll = true
this.scrollToBottom()
}

disconnect() {
observer.unobserve(this.element)
}

scrollToBottom() {
const { scrollHeight, clientHeight, offsetHeight } = this.element
if (scrollHeight >= clientHeight) {
this.element.scrollTop = scrollHeight - clientHeight
}
}

handleAdded() {
const { scrollHeight, clientHeight } = this.element
if (clientHeight >= scrollHeight) {
this.shouldScroll = true
}

if (this.shouldScroll) {
this.scrollToBottom()
}
}

handleScroll() {
const { scrollTop, scrollHeight, clientHeight, offsetHeight } = this.element
if (clientHeight >= scrollHeight) {
this.shouldScroll = true
} else {
this.shouldScroll =
Math.abs((scrollTop + offsetHeight) - scrollHeight) < 1
}
}
}

 smart_scroll_item_controller.js 

import { Controller } from 'stimulus'
import { getParentController } from 'stimulus_utils'
import Rails from 'rails-ujs'

export default class extends Controller {
connect() {
const parent = getParentController(this, 'smart-scroll')
Rails.fire(parent.element, 'smart-scroll:added')
}

}



 stimulus_utils.js 

export function getParentController(controller, identifier) {
const application = controller.application
let element = controller.element
do {
let foundController =
application.getControllerForElementAndIdentifier(element, identifier)
if (foundController) {
return foundController
}
} while (element = element.parentElement)
}