"Chat"-like Scroll to Bottom



  • 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.



  • 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:

    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.



  • 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.



  • 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.


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.