{"id":40244114,"url":"https://github.com/dmvvilela/svelte-scrollactive","last_synced_at":"2026-01-20T00:01:27.139Z","repository":{"id":65850149,"uuid":"601272925","full_name":"dmvvilela/svelte-scrollactive","owner":"dmvvilela","description":"This is a port of vue-scrollactive to Svelte, a lightweight and simple to use component that highlights menu items as you scroll the page, also scrolling to target section when clicked.","archived":false,"fork":false,"pushed_at":"2023-10-03T20:37:29.000Z","size":140,"stargazers_count":8,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-08T19:56:58.610Z","etag":null,"topics":["scroll","scrollspy","svelte","sveltekit"],"latest_commit_sha":null,"homepage":"","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dmvvilela.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-02-13T18:13:34.000Z","updated_at":"2025-03-30T10:58:01.000Z","dependencies_parsed_at":"2024-10-04T12:29:08.657Z","dependency_job_id":"99f42a99-9138-4949-afba-146923cc42d3","html_url":"https://github.com/dmvvilela/svelte-scrollactive","commit_stats":{"total_commits":16,"total_committers":1,"mean_commits":16.0,"dds":0.0,"last_synced_commit":"4361c591576184d86d767fd847e5ede16b035fa8"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/dmvvilela/svelte-scrollactive","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmvvilela%2Fsvelte-scrollactive","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmvvilela%2Fsvelte-scrollactive/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmvvilela%2Fsvelte-scrollactive/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmvvilela%2Fsvelte-scrollactive/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dmvvilela","download_url":"https://codeload.github.com/dmvvilela/svelte-scrollactive/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmvvilela%2Fsvelte-scrollactive/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28590676,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-19T23:59:00.777Z","status":"ssl_error","status_checked_at":"2026-01-19T23:58:54.030Z","response_time":67,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["scroll","scrollspy","svelte","sveltekit"],"created_at":"2026-01-20T00:01:18.555Z","updated_at":"2026-01-20T00:01:27.088Z","avatar_url":"https://github.com/dmvvilela.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# svelte-scrollactive\n\n## About\n\nThis is a port from [vue-scrollactive](https://github.com/eddiemf/vue-scrollactive) to Svelte.\n\nYou can check the demo on [REPL](https://svelte.dev/repl/d9616fce34c444d4bcac551cb5bdc0ee?version=3.55.1) and follow the common configuration for the module (check the example code on github repo).\n\nRemember to check if you're on the browser if you're using SvelteKit.\n\nMain differences from the Vue component:\n- The default scroll active class is 'active' instead of 'is-active'\n- You can use it without direct children (see below for example and why would you use this way).\n- There is an exported function called `scrollToElement` so that you can scroll as you wish.\n\n---\n\nThis component makes it simple to highlight a menu item with an 'active' class as you scroll.\n\n- Highlights items with a class as you scroll\n- Scrolls to item's section on click\n- Configurable easing scroll effect\n- Emits events for full control\n\nMake sure to check the [REPL demo](https://svelte.dev/repl/d9616fce34c444d4bcac551cb5bdc0ee?version=3.55.1) where you can play around with every option.\n\n## Installation\n\nInstall using `pnpm`\n\n```bash\npnpm add svelte-scrollactive\n```\n\nor `yarn`\n\n```bash\nyarn add svelte-scrollactive\n```\n\nor `npm`\n\n```bash\nnpm install --save svelte-scrollactive\n```\n\nthen import the plugin\n\n```js\nimport { Scrollactive } from 'svelte-scrollactive';\n```\n\n## Primary Usage\n\nThe primary way to use the plugin is to wrap your menu in a `\u003cScrollactive\u003e` tag (which will be your nav) and add a `.scrollactive-item` class in your `\u003ca\u003e` tags as I show in the example below:\n\n```js\n\u003cScrollactive class=\"my-nav\"\u003e\n  \u003ca href=\"#home\" class=\"scrollactive-item\"\u003eHome\u003c/a\u003e\n  \u003ca href=\"#about-us\" class=\"scrollactive-item\"\u003eAbout Us\u003c/a\u003e\n  \u003ca href=\"#portfolio\" class=\"scrollactive-item\"\u003ePortfolio\u003c/a\u003e\n  \u003ca href=\"#contact\" class=\"scrollactive-item\"\u003eContact\u003c/a\u003e\n\u003c/Scrollactive\u003e\n```\n\nYou can follow whatever structure you wish, just make sure to set the `.scrollactive-item` class in the items you want to highlight and set its `href` with a valid element ID that you would like to track while scrolling.\n\nThe secondary way to use it is almost the same as the primary but instead of relying on `href` to find your sections you'll need to set a data attribute `data-section-selector` on your elements with the section selector you wish to have.\n\n```js\n\u003cScrollactive class=\"my-nav\"\u003e\n  \u003cspan data-section-selector=\"#home\" class=\"scrollactive-item\"\u003eHome\u003c/span\u003e\n  \u003cspan data-section-selector=\".about-us\" class=\"scrollactive-item\"\u003eAbout Us\u003c/span\u003e\n  \u003cspan data-section-selector=\".portfolio div span\" class=\"scrollactive-item\"\u003ePortfolio\u003c/span\u003e\n  \u003cspan data-section-selector=\"#contact\" class=\"scrollactive-item\"\u003eContact\u003c/span\u003e\n\u003c/Scrollactive\u003e\n```\n\nAs you can see this gives you more freedom to choose different tags and you can use whatever CSS selector you find necessary, but it's important to notice that `data-section-selector` takes precedence over `href`, so if you have a tag `\u003ca href=\"#section-1\" data-section-selector=\"#another-section\"\u003e` it will completely ignore the `#section-1` and use `#another-section` instead.\n\n## SvelteKit Usage\n\nYou can use the first way with Sveltekit but checking if you're in the browser first. However, this will take long to show your content. So a better way is to load your content from server first (from load function) and add ScrollActive side by side like so:\n\n```js\n  import { Scrollactive } from 'svelte-scrollactive';\n  import { browser } from '$app/environment';\n  import { navigating } from '$app/stores';\n\n  {#if browser}\n    {#key $navigating}\n      \u003cScrollactive offset={120} /\u003e\n    {/key}\n  {/if}\n  \u003cslot /\u003e\n```\n\nBe sure to use the nav elements like mentioned above (using the class `scrollactive-item`). But now they can be anywhere in the page.\n\nYou can also use `navigating` store with a `key` directive to always update scrollactive when the page changes (and content is updated).\n\n## Events\n\nScrollactive will emit an `itemchanged(event, currentItem, lastActiveItem)` event when an active menu item is changed to another. You can catch that event doing as the example below:\n\n```js\n\u003cScrollactive class=\"my-nav\" on:itemchanged={onItemChanged}\u003e\n  \u003ca href=\"#home\" class=\"scrollactive-item\"\u003eHome\u003c/a\u003e\n  \u003ca href=\"#about-us\" class=\"scrollactive-item\"\u003eAbout Us\u003c/a\u003e\n  \u003ca href=\"#portfolio\" class=\"scrollactive-item\"\u003ePortfolio\u003c/a\u003e\n  \u003ca href=\"#contact\" class=\"scrollactive-item\"\u003eContact\u003c/a\u003e\n\u003c/Scrollactive\u003e\n```\n\n```javascript\nfunction onItemChanged({event, currentItem, lastActiveItem}) {\n  // here you have access to everything you need regarding that event\n}\n```\n\n## Configuration\n\nAll options should be passed as a prop in the `\u003cScrollactive\u003e` component as you can see in the example below:\n\n```js\n\u003cScrollactive activeClass=\"is-active\" offset=\"80\" duration=\"800\" bezierEasingValue=\".5,0,.35,1\" /\u003e\n```\n\nRemember that all options are optional and you can check the default values below:\n\n### Options\n\n```javascript\n/**\n * Active class that will be applied to the active item.\n */\nactiveClass: {\n  type: String,\n  default: 'active',\n},\n\n/**\n * Amount of space between top of screen and the section to highlight. (Usually your fixed\n * header's height).\n */\noffset: {\n  type: Number,\n  default: 20,\n},\n\n/**\n * Amount of space between the top of the screen and the section to highlight when clicking a\n * scrollactive item to scroll. It will use the value of the `offset` prop if none is provided\n * here. Useful when you want to use the `offset` prop to make an item be active as soon as\n * it shows on the screen but still scroll to the top of the section when clicking the item.\n */\nscrollOffset: {\n  type: Number,\n  default: null,\n},\n\n/**\n * The selector string of the scroll container element you'd like to use. It defaults to the\n * window object (most common), but you might want to change in case you're using an element\n * as container with overflow.\n */\nscrollContainerSelector: {\n  type: String,\n  default: '',\n},\n\n/**\n * Enables/disables the scrolling when clicking in a menu item.\n * Disable if you'd like to handle the scrolling by your own.\n */\nclickToScroll: {\n  type: Boolean,\n  default: true,\n},\n\n/**\n * The duration of the scroll animation when clicking to scroll is activated.\n */\nduration: {\n  type: Number,\n  default: 600,\n},\n\n/**\n * Defines if the plugin should track the section change when clicking an item to scroll to\n * its section. If set to true, it will always keep track and change the active class to the\n * current section while scrolling, if false, the active class will be immediately applied to\n * the clicked menu item, ignoring the passed sections until the scrolling is over.\n */\nalwaysTrack: {\n  type: Boolean,\n  default: false,\n},\n\n/**\n * Your custom easing value for the click to scroll functionality.\n * It must be a string with 4 values separated by commas in a cubic bezier format.\n */\nbezierEasingValue: {\n  type: String,\n  default: '.5,0,.35,1',\n},\n\n/**\n * Decides if the URL should be modified with the section id when clicking a scrollactive\n * item.\n */\nmodifyUrl: {\n  type: Boolean,\n  default: true,\n},\n\n/**\n * If true the active class will only be applied when a section matches exactly one of the\n * scrollactive items, meaning it will be highlighted when scrolling exactly inside the\n * section. If false (default) it will always highlight the last item which was matched\n * in a section, even if it is already outside that section (and not inside another that's\n * being tracked).\n */\nexact: {\n  type: Boolean,\n  default: false,\n},\n\n/**\n * If true the active class will be applied to the first scrollactive-item before you scroll\n * past it (even if you didn't reach it yet).\n */\nhighlightFirstItem: {\n  type: Boolean,\n  default: false,\n},\n\n/**\n * Changes the scrollactive container component html tag.\n */\ntag: {\n  type: String,\n  default: 'nav',\n},\n\n/**\n * If true the screen will scroll down to the element in the URL when the component is mounted.\n */\nscrollOnStart: {\n  type: Boolean,\n  default: true,\n},\n\n/**\n * Exported function to scroll with svelte-scrollactive to any element in the page.\n */\nscrollToElement: {\n  type: Function,\n}\n```\n\n## Contributing\n\nClone the repository and install the dependencies running `pnpm`. After the dependencies are installed you should be good to run `pnpm dev` which will load up a server with the sandbox for you to play around.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdmvvilela%2Fsvelte-scrollactive","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdmvvilela%2Fsvelte-scrollactive","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdmvvilela%2Fsvelte-scrollactive/lists"}