Skip to content

beyonk-adventures/svelte-scrollspy

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 




Svelte Scroll Spy

js-standard-style CircleCI svelte-v2 svelte-v3

Svelte Scroll Spy component

This component uses IntersectionObservers (and a polyfill for non-supporting browsers like Safari) so that performance is quick and doesn't impact the user's experience.

Usage

This library is pure javascript, so can be used with any framework you like.

Demo

npm run dev # http://localhost:12001

To use within a Svelte application:

npm i -D @beyonk/svelte-scrollspy

Usage

<ScrollSpy>
  <ul>
    {#each sections as section (section.id)}
    <li>
      <SectionHeader id="{section.id}">
        {section.title}
      </SectionHeader>
    </li>
    {/each}
  </ul>
  {#each sections as section (section.id)}
  <ScrollableSection id="{section.id}">
    <h2>{section.title}</h2>
    <p>{section.content}</p>
  </ScrollableSection>
  {/each}
</ScrollSpy>

<script>
  import { SectionHeader, ScrollableSection, ScrollSpy } from '@beyonk/svelte-scrollspy'

  const sections = [
    { id: 'abc', title: 'Some Title', content: 'Lorem ipsum dolor...' },
    { id: 'def', title: 'Some Other Title', content: 'Lorem ipsum dolor...' },
    { id: 'ghi', title: 'A Different Title', content: 'Lorem ipsum dolor...' }
  ]
</script>

You need to set id on each ScrollableHeader and its corresponding ScrollableSection. Besides that, everything else is pretty freeform.

Upon scrolling to the appropriate section of the page, the heading of the section which is topmost visible on the page will get the class 'active'.

Therefore, you could indicate the current section in the example above by highlighting it in red as follows:

<style>
	:global(.beyonk-svelte-scrollspy .active) {
		color: red;
	}
</style>