How to scroll to bottom when opening a modal

[flo]

Hi everyone,

I am following up on a question from @neelsarode during the office hours on October 17, 2023. The question was about how to properly initialize a long list of comments in a side popup so that users don’t have to scroll to see the last message.

1. First, let’s quickly create a side popup with a scrollable list.

2. A variable will be added to manage the display of the popup.

3. Add a button and create workflow. In the workflow add an action to change the value of the variable show to true. Test the button.

4. Add some content to the popup. I used the ready-made feed element from the add panel.

5. Add more objects to the feed variable.

[{"name":"Joshua Steiner","time":"Just now","handle":"jsteiner","comment":"Can we get some feedback on this?"},{"name":"Lana Steiner","time":"2 minutes ago","handle":"jsteiner","comment":"Sure, will take a look this afternoon."},{"name":"Elizabeth Clarke","time":"2 minutes ago","handle":"eclarke","comment":"Thanks for the comments. Will get to them very shortly."},{"name":"Lisa Wu","time":"10 minutes ago","handle":"lwu","comment":"Great work everyone, keep it up!"},{"name":"Joshua Steiner","time":"Just now","handle":"jsteiner","comment":"Can we get some feedback on this?"},{"name":"Lana Steiner","time":"2 minutes ago","handle":"jsteiner","comment":"Sure, will take a look this afternoon."},{"name":"Elizabeth Clarke","time":"2 minutes ago","handle":"eclarke","comment":"Thanks for the comments. Will get to them very shortly."},{"name":"Lisa Wu","time":"10 minutes ago","handle":"lwu","comment":"Great work everyone, keep it up!"},{"name":"Joshua Steiner","time":"Just now","handle":"jsteiner","comment":"Can we get some feedback on this?"},{"name":"Lana Steiner","time":"2 minutes ago","handle":"jsteiner","comment":"Sure, will take a look this afternoon."},{"name":"Elizabeth Clarke","time":"2 minutes ago","handle":"eclarke","comment":"Thanks for the comments. Will get to them very shortly."},{"name":"Lisa Wu","time":"10 minutes ago","handle":"lwu","comment":"Great work everyone, keep it up!"}]

6. Add a fixed high to the container. A good practice is to use calc(100vh - xxxpx) so the height will always be 100% of the screen height minus some pixels you specify by replacing xxx by a number. Like this

7. Then, on the container again, change the overflow value to scroll. Now you can scroll the content in the container.

8. Add a div at the end of the container. Set a height to 0px. Go to the settings tab and add an id: end-of-container

9. Then, go back to the workflow on the button that opens the modal. Add a new action custom javascript and paste this code:

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

Here you are:

More details of scrollIntoView function here.

I hope you like it. Tell us if it works for you.

Cheers.

[neelsarode]

Hell yeah thank you so much Flo!! Will get this implemented, love the solution you came up w/ here

[aldencarinahealth]

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?

[videobydak]

Hi all,

I have looked at as many threads as I could find on this topic, and in my use-case, none of the provided solutions were working. I’m building a GPT-based chatbot, and I wanted the chat window to scroll to the bottom when the user’s message was added to the list and when the GPT response was added to the list, that way the user never had to scroll to see the most recent content. I think I must have missed a simpler solution, and perhaps some of the custom JS would run when deployed, but I’d like to be able to see that kind of functionality in-editor…

So, TL;DR
I found a new solution, but it’s definitely a hack, and it doesn’t smoothly scroll.

I wrapped my chat history collection in a container with an input box at the bottom that has 0 height and 0 opacity with cursor engagement disabled. I gave the wrapper a specific height and set overflow to auto on the wrapper and set the chat history to be full size. Then when I click “Send Message”, in the workflow it runs, it has two actions called “Execute component action”. The first puts focus on the “ForcedScroll” input box at the bottom of the chat window, and the second puts the focus back to the message input box the user was using when they submitted the message.