- Notifications
You must be signed in to change notification settings - Fork0
Svelte store that tracks scroll position of elements, with Svelte action to register elements for tracking.
License
dexterklui/svelte-scrollspy
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Svelte ScrollSpy is aSvelte store thattracks the intersecting state of a set of elements. The store provides aSvelte action that allows you to easilyregister any element for tracking.
npm i -D svelte-scrollspyyarn add -D svelte-scrollspybun i -d svelte-scrollspyAlthough there are many intersection observer libraries out there, this libraryleverages the power of Svelte actions to provide a simple and intuitive API.Here are some of the benefits of using this library in a Svelte project.
- Have a cleaner DOM without needing to add wrapper elements.
- Easily register any elements, even nested elements, for tracking.
- No need to worry about cleaning up when elements being tracked are removedfrom the DOM. Callbacks in Svelte action automatically do that.
The object stored in the ScrollSpy store has the following properties:
| Property | Description |
|---|---|
amount | The number of targets being spied on. |
targets | The ordered set of all targets being spied on, in the order of them being added as a target. |
activeTargets | The ordered set of all intersecting targets, in the order of entering intersection. |
activeTarget | The target that became active most recently and is still active. I.e. the last item inactiveTargets. |
lastActiveTarget | The target that became active most recently. It may or may not be active now. If this target is no longer being spied on, this value is null. |
activeId | The id ofactiveTarget. |
lastActiveId | The id oflastActiveTarget. |
isActive | A function that checks if an element is active. Returnsnull if the given element is not a target being spied on. |
The ScrollSpy store also has the following methods besides thesubscribemethod of a Svelte store.
| Method | Description |
|---|---|
spy | A svelte action to add an element to the target list and start spying on it. |
unspy | Stop spying on a target and remove it from the target list. Accepts either the element itself or the id as the argument. This method is automatically called on all registered targets after they are removed from the DOM. |
unspyAll | Stop spying on all existing targets and remove them from the target list. |
To use ScrollSpy to track the current section in view on the page. First createa scroll spy store with the importedcreateScrollSpy function. You can pass inan IntersectionObserverInit object to configure the IntersectionObserver usedfor tracking.
In the example, we set therootMargin to-50% 0px so that a section startsintersecting when it touches the vertical center of the viewport.
importcreateScrollSpyfrom"svelte-scrollspy";exportconstscrollSpy=createScrollSpy({rootMargin:"-50% 0px"});
Then in any component file you can import the created store and use itsspymethod as a Svelte action to start spying on that element.
<script>importscrollSpyfrom"$lib/stores/scroll-spy";</script><sectionid="my-section"use:scrollSpy.spy><!-- ... --></section><!-- Other sections... -->
Element id is not required for spying. We gave an id to the element here onlyfor scrolling with URL hash. Now, it is easy to make a navbar that highlightsthe current section.
<script>importscrollSpyfrom"$lib/stores/scroll-spy";importkebabCaseToCapWordsfrom"$lib/utils.js";</script><nav> <ul> {#each$scrollSpy.targetsassection(section)} <liclass={$scrollSpy.lastActiveTarget===section?"active":""}> <ahref={"#"+section.id}>{kebabCaseToCapWords(section.id)}</a> </li> {/each} </ul></nav><style>/* Styling...*/</style>
You can augment Scroll Spy with additional properties and methods. For example,we can enforce that all elements being spied on must have an ID, and we canassign an arbitrary label to each element when they are registered.
To do this, we create our custom Svelte store by extending the functionality ofScroll Spy.
importcreateScrollSpyfrom'svelte-scrollspy';importtype{ActionReturn}from'svelte/action';exportconstsectionSpy=(()=>{// use spy store's functionalityconstspy=createScrollSpy({rootMargin:'-50% 0px'});return{ ...spy,// Overwrite spy() to add restriction on targets and apply custom attribute/** * A svelte action to register an element as a section to spy on. The * element must have an id. * *@param [label] - an arbitrary label for the section. This action assigns * the label value to the element's `data-section-label` attribute. If no * label is given, the element's id is transformed into a capitalized * string and used as the label. */spy(target:string|Element,label?:string,):ActionReturn<string,{id:string}>{ constelem=targetinstanceofElement ?target :document.getElementById(target);if(!elem||!elem.id)return{};label??=elem.id// kebab-case to Capitalized Words.replace(/-./g,(m)=>" "+m[1].toUpperCase()).replace(/^(.)/,(m)=>m.toUpperCase());const{ destroy}=spy.spy(elem);if(destroy)elem.setAttribute("data-section-label",label);return{ destroy};},};})();
We can then use our custom store to assign labels with Svelte action syntax.
<sectionid="my-section"use:sectionSpy.spy={"My Label"}><!-- ... --></section><!-- Other sections... --><footer>You're at the section: {$sectionSpy.activeLabel}</footer>
You can even add custom properties to the store.
exportconstsectionSpy=(()=>{constspy=createSpy({rootMargin:"-50% 0px"});// extend spy store's propertiesinterfaceSectionSpyextendsSpy{/** The label of the active target (attribute: "data-section-label") */activeLabel:string|null;/** * The label of the last active section (attribute: "data-section-label") */lastActiveLabel:string|null;}functiongetSectionSpy():SectionSpy{return{ ...get(spy),getactiveLabel(){returnthis.activeTarget?.getAttribute("data-section-label")??null;},getlastActiveLabel(){return(this.lastActiveTarget?.getAttribute("data-section-label")??null);},};}// Create our own custom storeconst{ subscribe, set}=writable<SectionSpy>(getSectionSpy());// Update our custom store whenever the spy store updatesspy.subscribe(()=>set(getSectionSpy()));return{ ...spy, subscribe,// Implement our own spy() method to add restriction on spied targets and// add custom attribute to the targetsspy(target:string|Element,label?:string,):ActionReturn<string,{id:string}>{constelem=targetinstanceofElement ?target :document.getElementById(target);if(!elem||!elem.id)return{};label??=elem.id// kebab-case to Capitalized Words.replace(/-./g,(m)=>" "+m[1].toUpperCase()).replace(/^(.)/,(m)=>m.toUpperCase());const{ destroy}=spy.spy(elem);if(destroy)elem.setAttribute("data-section-label",label);return{ destroy};},};})();
About
Svelte store that tracks scroll position of elements, with Svelte action to register elements for tracking.
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Releases
Packages0
Uh oh!
There was an error while loading.Please reload this page.