Conditional visibity based on screen position

0
I have a mobile page - Terms and Conditions. A lenghty text is inside a Scroll Container. Below it are 2 buttons: "Scroll to bottom" and "Go to next page". I'd like to conditionally show the scroll button first when page is dislayed. When user touches it and is navigated to end of the screen, the second button should be displayed instead. If user manually scrolls back up, to 10% from top of the screen, the scroll button should be displayed instead "go to next page" again. How to achieve this?
asked
1 answers
0

1.    Create Helper EntityCreate a non-persistent entity called ScrollHelper with a boolean attribute:AtBottom (default = false)

2.    Add Data ViewInside your page, add a Data View that creates this ScrollHelper using a nanoflow.Inside the data view, add both buttons.

3.    Set Visibility on Buttons:    Button 1: “Scroll to Bottom” → Visible when AtBottom = false    Button 2: “Go to Next Page” → Visible when AtBottom = true

4.    Give Scroll Container a Class Name:For example: class = "terms-scroll"

5.    Add JavaScript Snippet:

Add an HTML/JavaScript widget (or JavaScript action in nanoflow) with this code:

setTimeout(() => {

   const container = document.querySelector(".terms-scroll");

   if (!container) return;

   container.addEventListener("scroll", () => {

      const isAtBottom = container.scrollTop + container.clientHeight >= container.scrollHeight - 20;

      mx.data.get({

         xpath: "//ScrollHelper",

         callback: function(objs) {

            if (objs.length > 0) {

               objs[0].set("AtBottom", isAtBottom);

             }

         }

      });

  });

}, 1000);

 

answered