Autoscroll to bottom?

[NullVoxPopuli]

This is kind of a question / feature request? maybe?

anywho, I have a messaging app, and when the app loads, I would like to be able to scroll to the bottom of the chat.

I'm using renderFromLast=true, and I know there is this issue: https://github.com/html-next/vertical-collection/issues/158

I have this in my component:

import Component from '@ember/component';

export default class ChatHistory extends Component {
  didRender() {
    this.scrollMessagesContainer();
  }

  scrollMessagesContainer() {
    const element = this.element.querySelector('.messages') as HTMLElement;
    const lastMessage = element.querySelector('.message:last-child') as HTMLElement;

    if (lastMessage) {
      element.scrollTop = lastMessage.offsetTop + lastMessage.offsetHeight;
    }
  }
}

but it seems to not always work with vertical-collection. Is this a feature that makes sense to be in vertical-collection?

[pzuraq]

Yup, this would also be covered by the fix to #158. We need a generic way to imperatively tell VC to scroll, the main issue being that it’s impossible for anything but VC to accurately react to dynamic heights.

It’s hard to say what’s happening in your case, but if your item heights are dynamic, it’s very likely that VC renders occluded content for it’s predicted item height (say 100px), then you scroll the container to the bottom, then it measures the actual item height (200px), which pushes the real bottom down further.

[NullVoxPopuli]

hmm. cool. I'll do some more investigation tonight to figure out what the specific issue is.

[josiahbryan]

Any luck on this? I'm working on the exact same thing - messaging app and needing to scroll to bottom.

[mgkyawzayya]

Any luck on this? I'm working on the exact same thing - messaging app and needing to scroll to bottom.

Now . Are u ok? I am facing with this issue.

[mgkyawzayya]

This is kind of a question / feature request? maybe?

anywho, I have a messaging app, and when the app loads, I would like to be able to scroll to the bottom of the chat.

I'm using renderFromLast=true, and I know there is this issue: #158

I have this in my component:

import Component from '@ember/component';

export default class ChatHistory extends Component {
  didRender() {
    this.scrollMessagesContainer();
  }

  scrollMessagesContainer() {
    const element = this.element.querySelector('.messages') as HTMLElement;
    const lastMessage = element.querySelector('.message:last-child') as HTMLElement;

    if (lastMessage) {
      element.scrollTop = lastMessage.offsetTop + lastMessage.offsetHeight;
    }
  }
}

but it seems to not always work with vertical-collection. Is this a feature that makes sense to be in vertical-collection?

Are u ok in Ember Octane?

[ahamedalthaf]

@mgkyawzayya Can you try this PR if it works. We need to pass index so that it scrolls exactly to the item. https://github.com/html-next/vertical-collection/pull/302

[mgkyawzayya]

@mgkyawzayya Can you try this PR if it works. We need to pass index so that it scrolls exactly to the item. #302

I don't understand how this PR work.

[NullVoxPopuli]

I'm trying out the technique here: https://codepen.io/Craafter/pen/xBLVqZ

which gets around the whole scrolling issue by flipping everything upside down twice.

However, it looks like this breaks vertical-collection's calculations :(

Getting this error: