How to scroll to bottom when opening a modal

Tutorials
,
4

I used a flavor of this to get a scroll to work - instead of using the Div at the end of the container (which I couldnt get to work), I added a div to each collection item, and gave it a html tag “end-of-chat-”+collectionItem.data.id

If I used your code to reference a hard coded list item, it worked. So this would scroll down to the item with the id of 17.

const target = wwLib.getFrontDocument().querySelector("#end-of-chat-17")
target.scrollIntoView({behavior:"smooth", block: "start",inline: "nearest"});

(although there is a weird behavior where it only works on the first page load, afterwards it doesnt… going to see if that still happens after deploy… seems weird… anything I should consider there?)

But the main issue becomes when I generate the string to put into the querySelector, since the ID of the collectionItem object will change on page load (as the list gets longer, etc, the bottom most object will have a different ID).

I tried

const id = collections['theidofthecollection']?.['data']?.[0]?.['id'];
let htmlId = "#end-of-chat-" + id.toString();
const target = wwLib.getFrontDocument().querySelector(htmlId)
target.scrollIntoView({behavior:"smooth", block: "end",inline: "nearest"});

But I start getting a cannot read properties of null - so it doesn’t seem to work.

I can return just the htmlId fine, so it seems to be a specific issue passing it as a variable into the querySelector…

any ideas?