KO
|
EN
gitlite โ search
Search
#typescript
#ai-agents
#ai
#dsh-plugin
#deepseek-harness
#open-source
#cli
#claude-code
#codex
#developer-tools
#react
#windows
svelte-scrollspy
โ 39
Open GitHub โ
Scroll Spy component for Svelte
Download README (.md)
Explore Similar Repositories
svelte-hash-router
:
No description available.
svelte-starter-template
:
A small starter template to get up and running with Svelte v3 ๐
svelte-match-media
:
a matchMedia plugin for svelte 3
svelte-multistep-form
:
Svelte MultiStep Form like, this component is still in beta stage
vscode-svelte-snippets
:
๐งฉ Svelte 3 Snippets for VS Code
// repository documentation
Was this content helpful?
โ 0
(0 ratings)
Select Rating:
โ
โ
โ
โ
โ
Submit Feedback
Recent Feedback
×
Download README
Do you want to download the
README.md
file for
svelte-scrollspy
?
Download (.md)
<a href="https://beyonk.com"> <br /> <br /> <img src="https://user-images.githubusercontent.com/218949/144224348-1b3a20d5-d68e-4a7a-b6ac-6946f19f4a86.png" width="198" /> <br /> <br /> </a> ## Svelte Scroll Spy [](http://standardjs.com) [](https://circleci.com/gh/beyonk-adventures/svelte-scrollspy) [](https://v2.svelte.dev) [](https://svelte.dev) 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: ```bash npm i -D @beyonk/svelte-scrollspy ``` ## Usage ```jsx <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: ```html <style> :global(.beyonk-svelte-scrollspy .active) { color: red; } </style> ```
