Progress stops working on window resize

[ncpilla]

When resizing from mobile to desktop or visa-versa. The progress stops working and only returns 0 or 1. This doesn't seem to happen when you resize just a little bit. Only large changes.

You can see it happening by resizing the example here in chrome or firefox (edge seems to work for some reason) https://russellsamora.github.io/scrollama/progress/

[JidduAlexander]

I think what happens in this case is that the resize causes the trigger line to be outside of the window, at which point the trigger line is no longer functional. When you force a scrollama.resize() after resizing the window then also the trigger line is redrawn inside in the window and progress works.

The issue is not only for the progress, it also happens in sticky-side. When you resize the screen to very small the trigger no longer happens when you scroll up and down.

[NateWr]

I'm not certain what the cause was, but calling a debounced scrollama.resize() fixed this problem for me.

My assumption is that the built-in resize observer in 3.0 is responding too quickly, and the layout reflow hasn't finished yet, and that's causing some kind of problem. It could be that one or more of my steps is in an intermediary state that makes the trigger line outside of the window, as @JidduAlexander suggested.

For others, here is the code I used:

import scrollama from 'scrollama';
import { debounce } from 'throttle-debounce'

const scroller = scrollama()
  .setup(...)
  .onStep...

window.onresize = debounce(1000, scroller.resize)

[jepajerowski]

I ran into this same problem, and a debounced scrollama.resize() didn't fix it. With the debug tools on, I could see that the line was redrawn in the correct place after resize, but the progress still only fired at 0 or 1. I ended up fixing it by destroying and resetting the scroller entirely after each resize:

let scroller = scrollama();

let debouncedResize = debounce(() => {
    setUpScroller();
  }, 200);

function setUpScroller() {
    try {scroller.destroy();} catch(e) {}
    scroller.setup(...)
      .onStep...
 }

window.addEventListener('resize', debouncedResize);