Multiple containers on the same page? about scrollama HOT 5 CLOSED

You should be able to simply create multiple instances... eg:

// instantiate the scrollama
const scroller1 = scrollama();
const scroller2 = scrollama();

// setup the instance
scroller1
  .setup({
    step: '.container-1 .step'
  })

scroller2
  .setup({
    step: '.container-2 .step'
  })

from scrollama.

This is how I've gotten multiple containers running so far. https://codepen.io/bclinkinbeard/pen/JOgdwq?editors=1000

Note you'll have to use the debug view for it to behave correctly, per #38

I just stuck everything inside the init function to avoid the globals created in the demos. If there's a better way I'm all ears. :)

from scrollama.

I implemented a similar solution as yours but as in your example I get the same "error"... onStepEnter is triggered for both scrollers when one of their steps is triggered.

You can see this if you have scroll to the end of the first scroll container and observe the value in the second scroll container without entering it.

from scrollama.

Is this a bug or a feature :)

from scrollama.

As long as the containers aren't next to each other it seems to work fine.

from scrollama.