Home>
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.JavaScript
I tried to implement it with, but nothing works. The code isPast questionsI implemented it with reference to.
No error message is displayed, simplyJavaScript
As before, the scrollbar is still displayed at the top.
I would be grateful if you could lend me your help.
Corresponding source coderoom_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
-
Answer # 1
Related articles
- javascript - i want the scroll position to be at the bottom when the screen is loaded
- javascript - a tag information does not appear in the link field
- javascript - i want to match the scroll, but it fades in after loading
- javascript - i press the link in the hamburger menu and scroll, but i can't close the hamburger menu
- javascript - i want to implement scroll with slow and fast!
- javascript - this smooth scroll doesn't work
- javascript - is it possible to activate the scroll function with scroll-snap? ??
- javascript - i can't scroll the screen with jquery
- javascript - should i scroll with animate at regular intervals? ??
- javascript - image does not rotate well with scroll reveal
- javascript - the layout shifts by the amount of the scroll bar
- javascript - should i always put inside ?
- which is better to implement the scroll content that automatically loops in the horizontal direction with css or javascript?
- javascript - when you mouse over the scroll bar, the mouse cursor specified in the image returns to the normal cursor
- javascript - about automatic scroll position adjustment of mac chrome
- i want to scroll (move) to an arbitrary element when clicking a javascript button
- javascript - i want to fire the scroll event only once in each function
- javascript - i would like to see the amount of scroll, but i would like to know the reason why this description does not react
- javascript - the close button does not appear at the top of the drawer menu
Trends
- python - you may need to restart the kernel to use updated packages error
- php - coincheck api authentication doesn't work
- php - i would like to introduce the coincheck api so that i can make payments with bitcoin on my ec site
- [php] i want to get account information using coincheck api
- the emulator process for avd pixel_2_api_29 was killed occurred when the android studio emulator was started, so i would like to
- javascript - how to check if an element exists in puppeteer
- dart - flutter: the instance member'stars' can't be accessed in an initializer error
- sh - 'apt-get' is not recognized as an internal or external command, operable program or batch file
- i want to call a child component method from a parent in vuejs
- python 3x - typeerror: 'method' object is not subscriptable
scroll.js
I solved it by rewriting the file as follows!The description such as function call was insufficient.
scroll.js