Scroll to bottom button with dynamic content
jptrinh
Scroll to bottom button with dynamic content
jptrinh
4 Comments
orientismo@gmx.frApr 13, 2024
The first part works well (but I had to execute the JS manually since the code is not excecuted after loading the page).
The second part doesn't work : when a new message is created from Supabase, scrollPosition variable is not updated so the buton doesn't appear a the (new) bottom...I wil send you a short video...
The second part doesn't work : when a new message is created from Supabase, scrollPosition variable is not updated so the buton doesn't appear a the (new) bottom...I wil send you a short video...
orientismo@gmx.frApr 13, 2024
can you please explain how you set your formula to get the watcher value ?
Disclaimer: only works on element's that are fixed in relation to the viewport's borders (so doesn't work in elements that are children of another scrollable vertical page or container).
It uses a dummy container to be able to reference the scroll position of the final item in the array.
1. Create the dummy: Add a div with 0px (height for vertical scroll or width for horizontal scroll) to the end of your list, give it an id and activate scroll watching in this element's settings.
2. Create conditional rendering for the button or whatever element you want to be shown/hidden that states: {xPercent (or yPercent) of element in step 1} <= 0.
The % you're comparing (in this case 0) can also change depending on where the parent container is in relation to the viewport's borders. Remember, if you're scrolling vertically, the page cannot scroll up/down or it won't work. For chat apps that don't need the parent container to scroll it could work.