How to scroll messages to a specific location

[TasonIV]

When the window reloads, I want the message list to automatically scroll to where the user last viewed. How can I achieve this? Additionally, when adding certain special messages, I don't want scrolling to occur. How can I handle that?

[OvidijusParsiunas]

The scrolling behaviour you are describing is for a non-standard chat experience which would require the addition of a significant amount of code to work. Therefore I am not going to pursue this at the moment.

Nonetheless you can fork/clone the project and attempt to implement it for your custom component (it is very easy and instructions how to run it can be found here).

Here are some guides to help you implement this feature:

To automatically scroll to your last scrolled position is not easy to do, you will first need to track the scroll events in the chat by adding something like this in the constructor of the messages.ts file:

this.elementRef.addEventListener('scroll', () => {
  console.log('scrolling');
});

And when this event is invoked, you will need to fire an event so that your parent app can listen to it with something like this:

deepChat.onScroll(scrollHeight);

Then it is all up to your parent app to see how you can store the last scrolled dimensions; maybe via localstorage or some sort of a database, it is your choice ultimately.

Once you have this, you will need to create a new property like the ones in the deepchat.ts file that would accept a new scroll height which can be populated when the chat is setup:

@Property('number')
initialHeight?: number;

or you can create a custom method like:

scrollToHeight: (height) => void = () => {
  // scroll to specific height logic
};

which would be invoked when the chat has loaded.

This is pretty much how you can implement it.

To prevent scrolling for particular messages, you can create specific if statements in the messages.ts file where ElementUtils.scrollToBottom(this.elementRef) is called to stop it in certain scenarios.

This pretty much sums it up. I am happy to answer any questions you have.

Also, if you need any specific on-hands help or you want me to write the code for this for you - I do accepts one-time donations in the Sponsorship dashboard and all the pricing perks are listed accordingly. To note, if you do donate - some of the features would be hidden (using the _ prefix) as the new scrolling API is very much not standard. However, do not feel pressured to donate and I am more than happy continuing to help in this thread.

[OvidijusParsiunas]

I will be closing this thread, however if you have any specific questions feel free to comment below. Thanks!