How do I stop scrolling progress while on a specific div, but still use scrolling interaction?

i'm making a website where if you land on a particular div, the scrolling behaviour iterates through menu items. But I don't want the scrolling to actually happen. The current code is based on the scrolling distance travelled, but can I still use this property or any similar feature while disabling scrolling?

ScrollTrigger.create({
  trigger: '#wrapper',
  start: 'top top',
  end: 'bottom bottom',
  // scrub: true,
  onUpdate: (self) => {
    // Calculate the current scroll distance
    const currentScrollDistance = self.scroll();
    // Calculate the current menu index based on the scroll distance
    let newMenuItemIndex = Math.floor(currentScrollDistance / scrollDistance);
    newMenuItemIndex = clamp(newMenuItemIndex, 0, menuItems.length-1)
    if (newMenuItemIndex !== currentMenuItemIndex) {
      // REMOVE PREVIOUS PROPERTIES
      menuItems[currentMenuItemIndex].classList.remove('selected');
      let circlesPrv = contents[currentMenuItemIndex].querySelectorAll(".tags");
      circlesPrv.forEach(circle=>{
        circle.classList.remove('circle');
      })
      // ADD NEW PROPERTIES
      menuItems[newMenuItemIndex].classList.add('selected');
      let circlesCur = contents[newMenuItemIndex].querySelectorAll(".tags");
      circlesCur.forEach(circle=>{
        circle.classList.add('circle');
      })
      // UPDATE INDEX
      currentMenuItemIndex = newMenuItemIndex;
    }
  }
}

tried <body scroll:"no"> and setting overflow to hidden. but this disables the scrolling
rn thinking about fixing every element to position:fixed while on the div, but if there's a less forceful solution i'd be happy to hear it

Solution

You can use event.preventDefault to stop the native behavior of any event and execute your functionality instead.