{"id":13426127,"url":"https://github.com/beyonk-group/svelte-scrollspy","last_synced_at":"2025-06-11T21:38:45.488Z","repository":{"id":34024545,"uuid":"156695943","full_name":"beyonk-group/svelte-scrollspy","owner":"beyonk-group","description":"Scroll Spy component for Svelte","archived":false,"fork":false,"pushed_at":"2023-01-04T17:30:38.000Z","size":372,"stargazers_count":38,"open_issues_count":11,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-14T13:44:04.863Z","etag":null,"topics":["beyonk","intersection-observer","scroll","scrollspy","svelte","svelte-v3"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/beyonk-group.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-11-08T11:21:53.000Z","updated_at":"2024-04-02T17:00:57.000Z","dependencies_parsed_at":"2023-01-15T04:02:48.877Z","dependency_job_id":null,"html_url":"https://github.com/beyonk-group/svelte-scrollspy","commit_stats":null,"previous_names":["beyonk-group/svelte-scrollspy","beyonk-adventures/svelte-scrollspy"],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beyonk-group%2Fsvelte-scrollspy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beyonk-group%2Fsvelte-scrollspy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beyonk-group%2Fsvelte-scrollspy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beyonk-group%2Fsvelte-scrollspy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/beyonk-group","download_url":"https://codeload.github.com/beyonk-group/svelte-scrollspy/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243792279,"owners_count":20348606,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["beyonk","intersection-observer","scroll","scrollspy","svelte","svelte-v3"],"created_at":"2024-07-31T00:01:27.009Z","updated_at":"2025-03-15T21:30:41.753Z","avatar_url":"https://github.com/beyonk-group.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","components and libraries"],"sub_categories":["interaction"],"readme":"\u003ca href=\"https://beyonk.com\"\u003e\n    \u003cbr /\u003e\n    \u003cbr /\u003e\n    \u003cimg src=\"https://user-images.githubusercontent.com/218949/144224348-1b3a20d5-d68e-4a7a-b6ac-6946f19f4a86.png\" width=\"198\" /\u003e\n    \u003cbr /\u003e\n    \u003cbr /\u003e\n\u003c/a\u003e\n\n## Svelte Scroll Spy\n\n[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com) [![CircleCI](https://circleci.com/gh/beyonk-adventures/svelte-scrollspy.svg?style=shield)](https://circleci.com/gh/beyonk-adventures/svelte-scrollspy) [![svelte-v2](https://img.shields.io/badge/svelte-v2-orange.svg)](https://v2.svelte.dev) [![svelte-v3](https://img.shields.io/badge/svelte-v3-blueviolet.svg)](https://svelte.dev)\n\nSvelte Scroll Spy component\n\nThis 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.\n\n## Usage\n\nThis library is pure javascript, so can be used with any framework you like.\n\n### Demo\n\n```\nnpm run dev # http://localhost:12001\n```\n\n### To use within a Svelte application:\n\n```bash\nnpm i -D @beyonk/svelte-scrollspy\n```\n\n## Usage\n\n```jsx\n\u003cScrollSpy\u003e\n  \u003cul\u003e\n    {#each sections as section (section.id)}\n    \u003cli\u003e\n      \u003cSectionHeader id=\"{section.id}\"\u003e\n        {section.title}\n      \u003c/SectionHeader\u003e\n    \u003c/li\u003e\n    {/each}\n  \u003c/ul\u003e\n  {#each sections as section (section.id)}\n  \u003cScrollableSection id=\"{section.id}\"\u003e\n    \u003ch2\u003e{section.title}\u003c/h2\u003e\n    \u003cp\u003e{section.content}\u003c/p\u003e\n  \u003c/ScrollableSection\u003e\n  {/each}\n\u003c/ScrollSpy\u003e\n\n\u003cscript\u003e\n  import { SectionHeader, ScrollableSection, ScrollSpy } from '@beyonk/svelte-scrollspy'\n\n  const sections = [\n    { id: 'abc', title: 'Some Title', content: 'Lorem ipsum dolor...' },\n    { id: 'def', title: 'Some Other Title', content: 'Lorem ipsum dolor...' },\n    { id: 'ghi', title: 'A Different Title', content: 'Lorem ipsum dolor...' }\n  ]\n\u003c/script\u003e\n```\n\nYou need to set id on each `ScrollableHeader` and its corresponding `ScrollableSection`. Besides that, everything else is pretty freeform.\n\nUpon 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'.\n\nTherefore, you could indicate the current section in the example above by highlighting it in red as follows:\n\n```html\n\u003cstyle\u003e\n\t:global(.beyonk-svelte-scrollspy .active) {\n\t\tcolor: red;\n\t}\n\u003c/style\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeyonk-group%2Fsvelte-scrollspy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbeyonk-group%2Fsvelte-scrollspy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeyonk-group%2Fsvelte-scrollspy/lists"}