Insert new item and scroll to the end (chat/stream)

[bdbch]

So I'm currently working on a chat using this package for a more performant solution on how we render our chat items.

Since chats work a bit different to normal lists I have some issues with the implementation of the automated scrolling when new messages are added. Also updates and resizing just resets the scroll position if changed manually via el.scrollTop = 1000 for example. Do I need to tell the component that the scroll position was updated and needs to be saved?

scrollToItem isn't working for me, because it always scrolls to the beginning of the item instead of the end. Maybe implementing a scrollToEnd and scrollToStart would be good!

Here is a codesandbox link:
https://codesandbox.io/s/jn121l1n83

[Akryum]

This is something I need to improve in the scroller (for some reason the correct scrollHeight takes some time to be there).

In the meanwhile, here is the workaround we use in production at work for our own chat implementation:

scrollToBottom (force = true) {
  // isScrollBottom is a boolean prop which is true if the user is scrolled at the bottom before the new message is added
  if (!this.$_scrollingToBottom && (force || this.isScrollBottom)) {
    this.scrollToPosition(999999999)
    this.$_scrollingToBottom = true
  }
},

scrollToPosition (position) {
  const scroller = this.$refs.scroller.$el
  scroller.scrollTop = position
  requestAnimationFrame(() => {
    scroller.scrollTop = position
    setTimeout(() => {
      scroller.scrollTop = position
      this.$_scrollingToBottom = false
    }, 50)
  })
},

[bdbch]

Thanks! I'll try it out and will report back!

I think the issue is that the RecycleScroller watches the messages prop. So if I update any element in the messages array it will cause the whole list to redraw which also causes the view to jump up.

I think the component would need to save the old scroll position before the redraw and automatically readjust the position after the redraw is done.

Does your workaround work with dynamic changes in the messages array? The problem I think will occur with your solution is the update of my message status pending|received|read|read_all. Everytime I change them the list will redraw, right?

[Akryum]

No, only the relevant component will be redrawn.

[bdbch]

I think I also found a temporary fix for my scrolling issue while I'm not at the end of the chat.
When items are added, I can take the current containers height and define it as the min-height. This way the view won't jump when I update my list but the container will just expand further with each message.

Shouldn't be the norm but just for everyone who looks into this!

[Serkan-devel]

Is there a way to add items to the start of a list?

[bdbch]

@Akryum sadly I'm still struggling with the implementation in our chat application.

1. How can I keep the current scroll position while modifying the items? In case I'm not scrolled to the end of the chat I want to keep the current scroll position, but it seems like the whole list just updates and the scroll position jumps to scrollTop 0.

2. When loading a larger chat with a lot of messages I can't jump to the last index on chat load in a reliable way because it seems like the heights are still unknown when there are to many items.

Do you have a codesandbox or something which shows how your implementation works? I tried searching for already existing chat examples with this package but really can't find something similar to my needs.

[janwiemers]

I solved it by enabling the emitUpdate prop and using v-on:update="scrollDown" to execute this method.

scrollDown() {
  const el = this.$refs.customScroller;
  if(el.scrollTop > (el.scrollHeight - el.offsetHeight - 40)) {
    el.scrollTop = el.scrollHeight;  
  }
}

Still feels hacky though @Akryum are you working on such kind of a feature?

[Akryum]

Closed in https://github.com/Akryum/vue-virtual-scroller/releases/tag/v1.0.0-beta.5

[Quasarman]

@Akryum sadly I'm still struggling with the implementation in our chat application.

1. How can I keep the current scroll position while modifying the items? In case I'm not scrolled to the end of the chat I want to keep the current scroll position, but it seems like the whole list just updates and the scroll position jumps to scrollTop 0.

2. When loading a larger chat with a lot of messages I can't jump to the last index on chat load in a reliable way because it seems like the heights are still unknown when there are to many items.

Do you have a codesandbox or something which shows how your implementation works? I tried searching for already existing chat examples with this package but really can't find something similar to my needs.

Hey @bdbch, @janwiemers

I am working one something quite similar and haven't found a reliable way to keep the scroll position when loading in new messages from the top (e.g. when the users scrolls up and triggers fetching new messages). I add them to the back of my message list and tried a few ways calculating the correct offset, but there always seems to be a deviation which makes the scrolling look off and very unpleasant for the user (small jitter or jumping of the list).

Did you came up with a solution that works for you?
Thanks in advance!

[yanko-belov]

@Quasarman any updates about this one? Have you solved your problem?

[iransoftnet1]

I have this problem too, please create this update
When loading new items, we jump to scroll

[mjollneer]

yet another one with the same problem