"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!


    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.

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

Log in to reply