Set scroll position of overflow list

Ask us anything How do I?
1

Hey guys! Needed some assistance

I have a collection list of comments on my dashboard inside of a sidepanel. I disabled pagination as I was unsure on how to make the pagination dynamic so it changes based off the user’s screen height, and opted for all comments to load at once and use overflow to scroll through the comments

What i need help with is making sure that the list of comments is always scrolled to its bottom position, as in any messaging or comment front end the most recent message or comment is usually at the bottom, and users scroll up from there

I tested adding a javascript action on the button click that opens up this sidepanel, but it doesn’t seem the function properly

(Here’s that code)

document.addEventListener('DOMContentLoaded', function() {
    var elem = document.getElementById('commentsContainer');
    if (elem) elem.scrollTop = elem.scrollHeight;
}, false);

Ive also attached a screenshot of the sidepanel so you can see what the front end setup looks like a bit:

CleanShot 2023-10-12 at 09.14.18
CleanShot 2023-10-12 at 09.14.181181×958 115 KB

2

What is the structure of your sidepanel? A modal or a hidden div? Depending on the response, the problem maybe that you scroll before it’s rendered

3

I can’t figure this out either… is there an example of this working properly? For my use case its a basic chat box (collection list) with each chat (collection item), and I just want the component to auto scroll to the bottom of the list so the last chat is visible

I tried having the JS AI write the code too, but it used a scrollHeight property that doesn’t exist

// Get the chat-box element

let chatBox = document.querySelector('.chat-box');

// Scroll to the bottom of the chat-box

chatBox.scrollTop = chatBox.scrollHeight;

// Return true to indicate successful execution

return true;
4

I did make some progress here, but still have an issue. Found another related post: How to scroll to bottom when opening a modal - #4 by aldencarinahealth

5

Shared a new method I found that is working for me when the others have not: Anyone figure out “scroll to” as part of workflow? - Ask us anything / How do I? - WeWeb Community