"Chat"-like Scroll to Bottom
Please forgive the new-guy question, but I need to make a scroll-area scroll to the bottom automatically if the user hasn’t scrolled off the bottom. Sort-of like a “chat” style interface, keeping the most recent messages at the bottom of the screen. Has anyone played with anything like this and have a good suggestion? I tried the vue-chat-scroll library on both a scroll-view and a UL with no luck.
Thanks in advance!
PS: I am really loving the framework so far, this is the first issue I’ve run into that I couldn’t just solve via the docs.
One other thing is that it would be nice if it could integrate infinite scroll functionality too . Thanks again!
Try to use
window.scrollTo(0,document.body.scrollHeight)in the created hook of your view. This scroll to the bottom of your page. And then if you add a chat message run this code again. If you use a scrollable div use this code
let objDiv = document.getElementById("my-div") objDiv.scrollTop = objDiv.scrollHeight
this should also work in conjunction with infinite scroll.
@a47ae Thank you for your reply! Sadly none of those worked, ultimately only the following worked:
Directly modifying the DOM elements attached to the $ref didn’t work, in addition the second parameter is not optional as indicated in the documentation, which really tripped me up for awhile. Anyway, I hope this helps others.
Glad that you could find a solution and thank you for posting it for others to see.
Strange that directly accessing the DOM did not work for you, as I thought accessing the
refis kind of getting the element by a JS selector.
Could you please tell me how you made that work, I am building a chat application and I have no clue how to make the scroll area move to bottom. I would appreciate any help, thanks in advance.