sveltejs / svelte-scroller

A <Scroller> component for Svelte apps
https://svelte.dev/repl/76846b7ae27b3a21becb64ffd6e9d4a6
Other
347 stars 25 forks source link

Is it possible to put Scrollable into a position:fixed div? #6

Open ddcovery opened 5 years ago

ddcovery commented 5 years ago

Example: I have a fixed located div into the page and I whant to show a list of intems into and I want to know the "active" one.

<style>
.mycontainer {
  position: fixed;
  top:100px;
  bottom:10px;
  left: 100px;
  right: 10px;
  overflow: auto;
}
</style>

<div class="mycontainer">
<Scroller top={0.2} bottom={0.8} threshold={0.5}  bind:activeItemIndex>
  <div slot="foreground">
    {#each items as  item}
      <section>
     <p> {item} </p>
     <hr />
      </section>
    {/each}
  </div>
</Scroller>
</div>

<script>
  let items = [ "Text 1", "Text 2", "Text 2", "Text 4", "Text 5","Text 6","Text 7", "Text 8", "Text 9" ];
  let activeItemIndex;
  $: { console.log(activeItemIndex); }

</script>