Using conditional statement for scroll reach

[Dave_Hamel_2024]

I can't seem to get the time & scroll plugin to work, maybe because I am using the webSDK.  No idea.   So I am trying to create a conditional statement that only triggers on certain points. When a user scrolls to 25%,50% and so on... And I can get it to set a data element at the appropriate points but this is all in the conditional statement of the rule.  I want it to trigger the actual call as well.  So it is returning true at the right points, but it is not meeting the criteria to trigger the rest of the rule.

var scrollCheckpoints = [0.25, 0.5, 0.75, 1];
var checkpointsReached = [false, false, false, false];

function onScroll() {
  var scrollTop = window.scrollY || document.documentElement.scrollTop; // Position of the top of the window
  var docHeight = document.body.scrollHeight; // Total height of the page
  var windowHeight = window.innerHeight + 2;
  var windowBottom = scrollTop + windowHeight;
  var scrollPercentage = windowBottom / docHeight;
  for (let i = 0; i < scrollCheckpoints.length; i++) {
    if (!checkpointsReached[i] && scrollPercentage >= scrollCheckpoints[i]) {
      checkpointsReached[i] = true;
      if (triggerCheckpoint(scrollCheckpoints[i])) {
        console.log('returning true'); 
        return true;
      }
    }
  } 
  console.log('returning false')
  return false;
}

function triggerCheckpoint(percentage) {
  percentage = percentage * 100;
  _satellite.setVar('pageScroll', percentage);
  return true; // Return true when the checkpoint is triggered
}

window.addEventListener('scroll', onScroll);

I have the feeling it has something to do with the window.addEventListener, but I just can't figure it out.

[NimashaJain]

@Jennifer_Dungan 
Could you please help on this.

[Dave_Hamel_2024 · Accepted solution]

I figured it out.  You need to put this as the events Custom code, NOT the conditions.

var scrollCheckpoints = [0.25, 0.5, 0.75, 1];
var checkpointsReached = [false, false, false, false];
var checkpointReached = false; // Global variable to indicate checkpoint reached

function onScroll() {
  var scrollTop = window.scrollY || document.documentElement.scrollTop; // Position of the top of the window
  var docHeight = document.body.scrollHeight; // Total height of the page
  var windowHeight = window.innerHeight + 2;
  var windowBottom = scrollTop + windowHeight;
  var scrollPercentage = windowBottom / docHeight;
  for (let i = 0; i < scrollCheckpoints.length; i++) {
    if (!checkpointsReached[i] && scrollPercentage >= scrollCheckpoints[i]) {
      checkpointsReached[i] = true;
      if (triggerCheckpoint(scrollCheckpoints[i])) {
        console.log('Checkpoint reached at', scrollCheckpoints[i] * 100 + '%');
        checkpointReached = true; // Set the global variable to true
      }
    }
  }
  checkpointReached = false; // Set to false if no checkpoint is reached during this scroll
}

function triggerCheckpoint(percentage) {
  percentage = percentage * 100;
  _satellite.setVar('pageScroll', percentage);
  trigger(); // Return true to indicate the checkpoint was triggered
}

window.addEventListener('scroll', onScroll);

 The trigger function will ensure it will fire on the 25, 50, 75,100%