Question:
I’ve implemented my own chat in my Wix website. The chat messages are shown inside of a repeater in a scrollable section (Overflow content set to Scroll).
When a new message is sent or received I need to scroll the section (not the whole page) to its bottom so that the latest message is visible.
Is there a programmatic way to do it?
The only two ways to scroll are related to the page (wixWindowFronted.scrollTo and the view’s scrollTo) but nothing about the scroll inside of a component.
The this is all chats work this way: the top messages are the oldest, the newest are at the bottom. I just want to respect what is the expected behavior of the user (if possible).
I think a feature like this should be added.
It’s worth trying the following options- the overflow section may not work as intended.
No code solution
I would use a hidden element – container box would work– (arranged to the back) docked to the bottom of the section and set it as an anchor. Then use that anchor to scroll to when needed.
Velo solution
Or if you want to code it - you can use the forEachItem API and grab the last index (basically repeater.data.length -1 ) and if the index is last, use an $item(‘#itemBoxEx’).scrollTo() event.
The problem is that when scrolling to that element (or to the last chat element) the whole page scrolls, not just the scrollable container. If the element to which I scroll is hidden in the container, it will remain hidden, because the container does not scroll.
I have a similar problem also. I’m trying to set up a back to top button, but my container is set to Overflow: Scroll. So every time the back to top button is pressed, it should go to the top of the container. But I can’t get it to work!