# Show a button when a user is not at the bottom of an element **URL:** \ **Category:** How do I?\ **Created:** [April 4, 2024, 9:46am UTC](https://community.weweb.io/t/show-a-button-when-a-user-is-not-at-the-bottom-of-an-element/7935 "2024-04-04T09:46:28Z")\ **Posts on this page:** 16\ **Page:** 1
**Author:** ![Imran](https://avatars.discourse-cdn.com/v4/letter/i/7feea3/32.png) [@Imran](https://community.weweb.io/u/Imran)\ **Post date:** [April 4, 2024, 9:46am UTC](https://community.weweb.io/t/show-a-button-when-a-user-is-not-at-the-bottom-of-an-element/7935/1 "2024-04-04T09:46:28Z")
Hello, I have a script that displays a button to scroll down when the user is not located at the bottom. I included the execution of this script in a page workflow. However, it seems that this doesn’t work. Do you have an idea ? To note that : - There is no “scroll trigger” on an element but only at page level - I cannot use the “watch scroll” because the element must be dynamic. I already ask the question on a Slack but I haven’t had a solution that works. Here’s the code ```auto var element = wwLib.getFrontDocument().getElementById('chatElement'); var scrollButton = wwLib.getFrontDocument().getElementById('scrollButton'); element.addEventListener('scroll', function() { if (element.offsetHeight + element.scrollTop + 1 >= element.scrollHeight) { scrollButton.style.display = 'none'; } else { scrollButton.style.display = 'block'; } }); scrollButton.addEventListener('click', function() { element.scrollTo({ top: element.scrollHeight, behavior: 'smooth' }); }); ``` ---
**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\ **Post date:** [April 5, 2024, 11:04am UTC](https://community.weweb.io/t/show-a-button-when-a-user-is-not-at-the-bottom-of-an-element/7935/2 "2024-04-05T11:04:34Z")
Hi @Imran 👋 > [@Imran](#): > > To note that : > > - There is no “scroll trigger” on an element but only at page level > - I cannot use the “watch scroll” because the element must be dynamic. I’m not sure I grasp your use case completely. Could you record a short video that shows us what your page looks like, and explains what you’re trying to achieve? ---
**Author:** ![Imran](https://avatars.discourse-cdn.com/v4/letter/i/7feea3/32.png) [@Imran](https://community.weweb.io/u/Imran)\ **Post date:** [April 5, 2024, 11:50am UTC](https://community.weweb.io/t/show-a-button-when-a-user-is-not-at-the-bottom-of-an-element/7935/3 "2024-04-05T11:50:31Z")
@Joyce My need is quite simple : I want to display a button when the user is not at the bottom of a scrollable dynamique element (a chat). This button allows him to automatically scroll down. The same behavior as Whatsapp. The solutions that were proposed to me did not work. ---
**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\ **Post date:** [April 5, 2024, 4:06pm UTC](https://community.weweb.io/t/show-a-button-when-a-user-is-not-at-the-bottom-of-an-element/7935/4 "2024-04-05T16:06:11Z")
@Imran ok, but I struggle to understand why the watch scroll doesn’t work for you. Could you share more about how you tried to set it up? ---
**Author:** ![Imran](https://avatars.discourse-cdn.com/v4/letter/i/7feea3/32.png) [@Imran](https://community.weweb.io/u/Imran)\ **Post date:** [April 6, 2024, 2:42pm UTC](https://community.weweb.io/t/show-a-button-when-a-user-is-not-at-the-bottom-of-an-element/7935/5 "2024-04-06T14:42:37Z")
@Joyce The problem is that the size of my element is dynamic and therefore I cannot condition the display of the button depending on where I am in relation to the heigth of this element. This may work the first time but as the height increases there will be a lag. Here is the explanation and a demo from a member of the Weweb community > **[Slack is your productivity platform](https://no-code-france.slack.com/?redir=%2Farchives%2FC01V07PQ934%2Fp1709883825274019%3Fname%3DC01V07PQ934%26perma%3D1709883825274019)** > > Slack is a new way to communicate with your team. It’s faster, better organized, and more secure than email. ---
**Author:** ![Imran](https://avatars.discourse-cdn.com/v4/letter/i/7feea3/32.png) [@Imran](https://community.weweb.io/u/Imran)\ **Post date:** [April 8, 2024, 12:03pm UTC](https://community.weweb.io/t/show-a-button-when-a-user-is-not-at-the-bottom-of-an-element/7935/6 "2024-04-08T12:03:59Z")
@Joyce Does the problem seem clearer to you? ---
**Author:** ![Imran](https://avatars.discourse-cdn.com/v4/letter/i/7feea3/32.png) [@Imran](https://community.weweb.io/u/Imran)\ **Post date:** [April 10, 2024, 1:26am UTC](https://community.weweb.io/t/show-a-button-when-a-user-is-not-at-the-bottom-of-an-element/7935/7 "2024-04-10T01:26:23Z")
Hello @Joyce Can I find a solution to this problem with Weweb or am I heading straight into the wall? However my piece of code is basic and it is pure JS… I have a paid account, should I request support? Thank you for your answer. ---
**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\ **Post date:** [April 12, 2024, 8:33pm UTC](https://community.weweb.io/t/show-a-button-when-a-user-is-not-at-the-bottom-of-an-element/7935/8 "2024-04-12T20:33:49Z")
Hi @Imran 👋 How about displaying the button depending on where it is in relation to the bottom of the page or to the top of the element right below it on the page? ---
**Author:** ![jptrinh](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/jptrinh/32/1493_2.png) [@jptrinh](https://community.weweb.io/u/jptrinh)\ **Post date:** [April 13, 2024, 7:22am UTC](https://community.weweb.io/t/show-a-button-when-a-user-is-not-at-the-bottom-of-an-element/7935/9 "2024-04-13T07:22:47Z")
Would that be the behavior that you are trying to achieve? ---
**Author:** ![Imran](https://avatars.discourse-cdn.com/v4/letter/i/7feea3/32.png) [@Imran](https://community.weweb.io/u/Imran)\ **Post date:** [April 13, 2024, 10:44am UTC](https://community.weweb.io/t/show-a-button-when-a-user-is-not-at-the-bottom-of-an-element/7935/10 "2024-04-13T10:44:45Z")
@jptrinh Yes, but what happen when your element height increase dynamically ? ---
**Author:** ![jptrinh](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/jptrinh/32/1493_2.png) [@jptrinh](https://community.weweb.io/u/jptrinh)\ **Post date:** [April 13, 2024, 2:05pm UTC](https://community.weweb.io/t/show-a-button-when-a-user-is-not-at-the-bottom-of-an-element/7935/11 "2024-04-13T14:05:28Z")
I’ve found a way to make the button appear when the user is not at the bottom of the div (when he scrolls up or when new message are added with Supabase Realtime for instance) Made a short video to explain all of that better. > **[Scroll to bottom button with dynamic content — Tella](https://www.tella.tv/video/cluy5msz301p50gl4h2iu21w1/view)** > > Video recording for work TL;DR - Scroll event listener to watch when the user scrolls up - MutationObserver to watch any changes in the DOM I feel like it works well. Would love any feedback on that if there are downsides using that! Also, here is the script used. ```auto const container = wwLib .getFrontDocument() .querySelector("#container").parentElement; const content = wwLib.getFrontDocument().querySelector("#content").parentElement; let watcher = 0; container.addEventListener("scroll", (event) => { watcher = content.offsetHeight - container.offsetHeight - container.scrollTop; wwLib.wwVariable.updateValue("8035b35a-50c4-4116-aefb-87934f0bbb33", watcher); }); const observer = new MutationObserver(mutations => { mutations.forEach(mutation => { if (mutation.type === 'childList' && mutation.addedNodes.length > 0) { watcher = content.offsetHeight - container.offsetHeight - container.scrollTop; wwLib.wwVariable.updateValue("8035b35a-50c4-4116-aefb-87934f0bbb33", watcher); } }); }); observer.observe(container, { childList: true, subtree: true, }); ``` ---
**Author:** ![jptrinh](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/jptrinh/32/1493_2.png) [@jptrinh](https://community.weweb.io/u/jptrinh)\ **Post date:** [April 13, 2024, 2:25pm UTC](https://community.weweb.io/t/show-a-button-when-a-user-is-not-at-the-bottom-of-an-element/7935/12 "2024-04-13T14:25:29Z")
Just had another idea. By leveraging the component workflows, you can watch any changes on a property. For instance: - Create a button component - Create a property Collection or Messages - On the instance of that button, bind this property to the messages array from your Supabase Collection - In your button component, create a component workflow, with the trigger On property change / Collection - The actions in the workflow would calculate the scroll position like we do on my previous message That might be better to maintain in WeWeb. ---
**Author:** ![Imran](https://avatars.discourse-cdn.com/v4/letter/i/7feea3/32.png) [@Imran](https://community.weweb.io/u/Imran)\ **Post date:** [April 13, 2024, 7:45pm UTC](https://community.weweb.io/t/show-a-button-when-a-user-is-not-at-the-bottom-of-an-element/7935/13 "2024-04-13T19:45:53Z")
Hi @jptrinh thanks ! I will test this tonight and will give feedback ---
**Author:** ![jptrinh](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/jptrinh/32/1493_2.png) [@jptrinh](https://community.weweb.io/u/jptrinh)\ **Post date:** [April 15, 2024, 8:41am UTC](https://community.weweb.io/t/show-a-button-when-a-user-is-not-at-the-bottom-of-an-element/7935/14 "2024-04-15T08:41:58Z")
Had a look at your demo video. I would suggest to try and isolate the different values to see where it is not working. My guess would be that you are not targeting the correct div to calculate its height or position. Try putting some console.log() ---
**Author:** ![Imran](https://avatars.discourse-cdn.com/v4/letter/i/7feea3/32.png) [@Imran](https://community.weweb.io/u/Imran)\ **Post date:** [April 16, 2024, 2:40pm UTC](https://community.weweb.io/t/show-a-button-when-a-user-is-not-at-the-bottom-of-an-element/7935/15 "2024-04-16T14:40:19Z")
@jptrinh Indeed I was not targeting the right element. Now it seems to work. Thank you so much ! ---
**Author:** ![jose](https://avatars.discourse-cdn.com/v4/letter/j/e274bd/32.png) [@jose](https://community.weweb.io/u/jose)\ **Post date:** [March 22, 2025, 10:26pm UTC](https://community.weweb.io/t/show-a-button-when-a-user-is-not-at-the-bottom-of-an-element/7935/16 "2025-03-22T22:26:47Z")
I found a possible solution that doesn’t involve custom code. 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.