Home>

javascript - i want the scroll bar to always appear at the bottom of the chat screen

The chat screen is scrolled.
When the number of messages increases and exceeds the width of the screen, the scroll bar will be displayed at the top (oldest message position).

I want to fix the display position to the bottom (newest message position) like LINE etc.JavaScriptI tried to implement it with, but nothing works. The code isPast questionsI implemented it with reference to.
No error message is displayed, simplyJavaScriptAs before, the scrollbar is still displayed at the top.

I would be grateful if you could lend me your help.

Corresponding source code

room_show.html.erb

    
      <% if @ messages.present?%>
        <% @ messages.includes (: user) .each do | m |%><!-The following message information is displayed repeatedly. ->
            
              
            <% = link_to user_path (@user) do%>
                ">
            <% end%>
              
             <% = m.content%>
              
               <% = m.updated_at.strftime ("% Y /% m /% d")%>
               <% = m.updated_at.strftime ("% H:% M")%>
              
            
        <% end%>
      <% end%>

rooms.scss

.message-details {
  height: 57vh;
  overflow-y: scroll;
}

scroll.js

function scrollToEnd () {
  const messageDetails = document.getElementById ('scroll-inner');
  messageDetails.scrollTop = messageDetails.scrollHeight;
}
Supplementary information (FW/tool version, etc.)

ruby 2.6.4p104
RubyGems 3.0.3
Rails 5.2.3

javascript rubyonrails ruby rubyonrails5
  • Answer # 1

    scroll.jsI solved it by rewriting the file as follows!
    The description such as function call was insufficient.

    scroll.js

    document.addEventListener ("turbolinks: load", () =>{
    function scrollToEnd () {
        const messageDetails = document.getElementById ('scroll-inner');
        messageDetails.scrollTop = messageDetails.scrollHeight;
    }
    scrollToEnd ()
})

Related articles