Step sometimes not triggered - use with container as parent

[boeckMt]

If scrolling down and up multiple times, it happens sometimes that onStepEnter/onStepExit is not triggered.

---

Setting:

• Browser: Chromium: 99.0.4844.88
• scrollama: 3.1.0

---

I have created a codesandbox

• https://codesandbox.io/s/scrollama-test-direction-c5rih?file=/src/index.js
• https://c5rih.csb.app/

My use case was to change the height of a footer if a step is entered on direction: down and reset the it on exit and direction: up.
Sometimes the event is not fired and the footer remains on the last state. It's hard to debug because it doesn't happen regularly

[russellsamora]

can you check again in the latest 3.1.1?

[boeckMt]

@russellgoldenberg thanks for the fast response!

I updated the codesandbox but it looks there is still a problem.

Maybe the problem is related to the value of the offset. If I choose a offset smaller than 0.7 e.g. 0.6 onStepEnter/onStepExit is not triggered at all in the example. If I choose a bigger value like 0.8 e.g. 0.9 it is triggered twice and then sometimes I get direction === 'up' when scrolling down (for the latest trigger).
In the range from 0.7 - 0.8 it looks like everything is working like it should. Perhaps multiple fired steps add some confusion to this function https://github.com/russellgoldenberg/scrollama/blob/main/src/scroll.js#L6

[rainer-friederich]

Just wanted to confirm that the recent version has issues.

Wanted to upgrade vom 2.2.3 to 3.1.1 and sometimes the triggers did not work. Reverted to 2.2.3 and everything is fine.

Our usage is kind of basic and the onStepEnter is only triggered in ~20% of cases ?

export default {
  init() {
    const STEP_CLASS = '.enter-transition'

    if (!document.querySelector(STEP_CLASS)) {
      return
    }

    const scroller = scrollama()

    scroller
      .setup({
        step: STEP_CLASS,
        offset: 1,
      })
      .onStepEnter((response) => {
        if (response.direction === 'down') {
          response.element.classList.add('xyz-in')
          return
        }
      })

    window.addEventListener('resize', scroller.resize)
  },
}