How to Create an Infinite Scroll in WeWeb with Xano

In this video we demonstrate how to create an infinite scrolling list with Xano and WeWeb. Global workflows, the dev editor, and leveraging the power of JavaScript.

https://www.youtube.com/watch?v=kBE_vyZCSyU

var el = wwLib.getFrontDocument().querySelector('[data-ww-uid="YOUR-ELEMENT-UID"]');
var lastExecution = 0;

// Function to execute the workflow with debounce
function executeWorkflow() {
  var now = Date.now();

  if (now - lastExecution >= 350) {
    wwLib.executeWorkflow("YOUR-WORKFLOW-UID");
    lastExecution = now;
  }
}

// Function to check scroll position and execute the workflow if conditions are met
function checkScroll() {
  const scrollTop = el.scrollTop;
  const scrollHeight = el.scrollHeight;
  const clientHeight = el.clientHeight;
  const scrolledPercentage = (scrollTop / (scrollHeight - clientHeight)) * 100;

  if (scrolledPercentage >= 80) {
    executeWorkflow();
  }
}

// Attach scroll event listener
el.addEventListener('scroll', checkScroll);