Show a button when a user is not at the bottom of an element

Ask us anything How do I?
1

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

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' 
  });
});
2

Hi @Imran :wave:

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?

3

@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.

4

@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?

5

@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

6

@Joyce Does the problem seem clearer to you?

7

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.

8

Hi @Imran :wave:

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?

9

Would that be the behavior that you are trying to achieve?

1 Like
10

@jptrinh Yes, but what happen when your element height increase dynamically ?

11

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.

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.

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,
});
12

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.

13

Hi @jptrinh thanks !
I will test this tonight and will give feedback

14

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()

15

@jptrinh
Indeed I was not targeting the right element. Now it seems to work. Thank you so much !

2 Likes
16

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.