"Chat"-like Scroll to Bottom

[jdscolam]

Hi everyone,

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!

-jdscolam

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.

[jdscolam]

One other thing is that it would be nice if it could integrate infinite scroll functionality too :). Thanks again!

[a47ae]

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.

[jdscolam]

@a47ae Thank you for your reply! Sadly none of those worked, ultimately only the following worked:

this.$refs.chatArea.setScrollPosition(this.$refs.chatArea.$el.scrollHeight, 1);

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.

[a47ae]

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 ref is kind of getting the element by a JS selector.

[rafiul2110]

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.

[tohagan]

This might also be useful … https://github.com/theomessin/vue-chat-scroll