svelte-kit-scroller

Am planning to open source this when I get some breathing room, but a gist will do for now.

Usage:

<Scroller top=0.2 bottom=0.8 threshold=0.5 bind:index bind:offset bind:progress parallax>
  <div slot='background'>
    <!-- fixed, or parallaxing (if the parallax option is set) background -->
  </div>

  <div slot='foreground'>
    <!-- the foreground scrolls normally. As it does, the values of
         `index`, `offset` and `progress` update -->

    <section>
      <!-- typically each section will occupy a decent chunk of vertical space -->
      <p>this is the first section</p>
    </section>

    <section>
      <p>this is the second section</p>
    </section>

    <section>
      <p>this is the third section</p>
    </section>
  </div>
</Scroller>

The options are as follows:

• top — the vertical position at which the background becomes fixed (i.e. with top=0.2, the background will scroll up normally with the rest of the page content until the top edge hits window.innerHeight * 0.2, at which point it becomes fixed
• bottom — the vertical position at which it becomes unfixed
• threshold — the vertical position at which each foreground section causes the index to change. At threshold=0.5 (the default), the index changes from 0 to 1 when the top of the second section passes the middle of the page
• query — the selector used for identifying foreground sections. Default to section but could be e.g. query=li

We can listen to the state of the scroller with these bindings:

• index — the currently active section. Starts at 0 (maybe it should be -1 before the first section crosses the threshold?)
• offset — how much of the active section we’ve scrolled through (i.e. in a window that’s 1000px high, if the top edge of the section is at 400px, and bottom edge is at 800px, and threshold=0.5 aka 500px, offset will be 0.25 because 500px is 0.25 of the way between 400px and 800px
• progress — the total progress, between 0 and 1, made between the foreground’s top edge hitting top and the bottom edge hitting bottom