Scroll to botton Chat

Ask us anything
1

Hi WeWeb Community,

I’m currently working on a web app using WeWeb and I’m facing an issue with scrolling a container to the bottom. I want my chatContainerBox to automatically scroll to the bottom whenever new content is added. However, the solutions I’ve tried so far haven’t worked. Here is the JavaScript code I am using:

setTimeout(function() {
var element = wwLib.getFrontDocument().getElementById(‘chatContainerBox’);
if (element) {
// Scroll to the bottom by setting scrollTop
element.scrollTop = element.scrollHeight;
} else {
console.error(‘Message container not found’);
}
}, 0);

I have also tried using scrollIntoView, but it didn’t work either. Here is that code for reference:

var element = wwLib.getFrontDocument().getElementById(‘chatContainerBox’);
if (element && element.lastElementChild) {
element.lastElementChild.scrollIntoView({ behavior: “smooth”, block: “end” });
} else {
console.error(‘Message container or its last element not found’);
}

Despite these attempts, the container does not scroll to the bottom as expected. I could manage to scroll into top, but not to botton.

I tried to follow all the suggestions on other topics but I could not manage to work.

My message container (chatContainerBox) is on display flex.

Does anyone can help me?

2

Did you ever get this working? I’m trying to do this to using your first solution, but the scrollTop value is stuck at 0.

3

Because of the way weweb makes wrapper div’s, the scrolling actually is done in a hidden parent element, and not the element itself.

I’ve not found a direct way to name the parent element, so I’m using this method to search for the parent and scroll that


function scrollCollectionToTop() {
    const doc = wwLib.getFrontDocument();
    const collectionTable = doc.getElementById('collection_table');
    
    if (collectionTable) {
        let scrollableParent = collectionTable;
        while (scrollableParent && scrollableParent !== doc.body) {
            const style = window.getComputedStyle(scrollableParent);
            const overflow = style.getPropertyValue('overflow-y');
            if (overflow === 'auto' || overflow === 'scroll') {
                //console.log('Scrolling element to top:', scrollableParent);
                scrollableParent.scrollTop = 0;
                return;
            }
            scrollableParent = scrollableParent.parentElement;
        }
    } else {
        console.error('Collection table element not found');
    }
}

// Usage
scrollCollectionToTop();
1 Like
4

I could not make it work
I will try @thomlov method :wink: