# Scroll-Based Navigation Between States in a Multi-State Box Inside a Section

**URL:** <https://forum.wixstudio.com/t/scroll-based-navigation-between-states-in-a-multi-state-box-inside-a-section/70453>\
**Category:** Ask the community\
**Tags:** technical-talk, code, design, question, wix-studio\
**Created:** [April 23, 2025, 9:18am UTC](https://forum.wixstudio.com/t/scroll-based-navigation-between-states-in-a-multi-state-box-inside-a-section/70453 "2025-04-23T09:18:47Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![user4886](https://avatars.discourse-cdn.com/v4/letter/u/e8c25b/32.png) [@user4886](https://forum.wixstudio.com/u/user4886)\
**Post date:** [April 23, 2025, 9:18am UTC](https://forum.wixstudio.com/t/scroll-based-navigation-between-states-in-a-multi-state-box-inside-a-section/70453/1 "2025-04-23T09:18:47Z")

</div>

Hi everyone 👋

I’m trying to create a scroll-driven interaction in Wix Studio using a Multi-State Box(`#multiStateBox1`) placed inside a section (`#section57`). This box contains four states (`state1` to `state4`), and I want the user to scroll through the section — changing to the next state on each scroll (like a slide effect), before being able to scroll past the section.

I’ve tried using `Document.on("wheel")` and `section.on("wheel")` with `changeState()`, and added debounce logic, but the scroll-to-state transition still doesn’t work. The section gets passed over during regular scroll and the states don’t change as expected.

My goal is:

- Scroll inside the section triggers `.changeState()` between the states
- User should stay “locked” in the section until all 4 states are shown
- Ideally, it should work on both desktop and mobile
- I’m not using separate boxes, only states inside the Multi-State Box

I’ve already implemented basic scroll detection and used `.changeState()` to switch between the states.  
I’m also updating button styles (`#stateBtn1`, `#stateBtn2`, etc.) to reflect the active state as visual indicators. Still it’s not working.

Has anyone successfully implemented this kind of interaction in Wix Studio? Or is there a workaround that works reliably with scroll input?

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [April 24, 2025, 7:54pm UTC](https://forum.wixstudio.com/t/scroll-based-navigation-between-states-in-a-multi-state-box-inside-a-section/70453/2 "2025-04-24T19:54:07Z")

</div>

> [@Disable page scroll when lightbox is active](https://forum.wixstudio.com/t/disable-page-scroll-when-lightbox-is-active/70461/5):
>
> Here, a little present for you… import wixWindowFrontend from 'wix-window-frontend'; $w.onReady(()=\> {scrollLock(5000);}); function scrollLock(duration) { wixWindowFrontend.getBoundingRect().then((windowSizeInfo) =\> { let scrollX = windowSizeInfo.scroll.x; let scrollY = windowSizeInfo.scroll.y; const targetScrollX = scrollX; const targetScrollY = scrollY; let scrollInterval = setInterval(() =\> { wixWindowFrontend.scrollTo(targetScrollX, targetScrollY); }, 1); …

The basic **IDEA** of how to do so, you will find inside the provided post.