# @beyonk/svelte-scrollspy

Latest version **2.1.2** (published 2019-06-28) · 0 weekly downloads

## Install

```sh
npm install @beyonk/svelte-scrollspy
pnpm add @beyonk/svelte-scrollspy
yarn add @beyonk/svelte-scrollspy
bun add @beyonk/svelte-scrollspy
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.2 |
| Published | 2019-06-28 |
| First published | 2018-11-08 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 37.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 39 |
| Maintainers | antony |
| Keywords | svelte, scrollspy, intersection observer, dependency free, vanilla js |

## Links

- npm: https://www.npmjs.com/package/@beyonk/svelte-scrollspy
- Repository: https://github.com/beyonk-adventures/svelte-scrollspy
- Homepage: https://github.com/beyonk-adventures/svelte-scrollspy#readme
- Issues: https://github.com/beyonk-adventures/svelte-scrollspy/issues
- npm.io page: https://npm.io/package/@beyonk/svelte-scrollspy

## Dependencies (1)

- [intersection-observer](https://npm.io/package/intersection-observer.md) ^0.7.0

## Alternatives

- [pagerjs](https://npm.io/package/pagerjs.md) — 60 weekly downloads
- [whistle.savefor-mock](https://npm.io/package/whistle.savefor-mock.md) — 4 weekly downloads
- [n8n-nodes-ecom-adspy-tco](https://npm.io/package/n8n-nodes-ecom-adspy-tco.md) — 0 weekly downloads
- [mokapi-storybook-addon](https://npm.io/package/mokapi-storybook-addon.md) — 0 weekly downloads
- [mokapi-msw-adapter](https://npm.io/package/mokapi-msw-adapter.md) — 0 weekly downloads

## Recent versions

- 2.1.2 (latest) — 2019-06-28
- 2.1.1 — 2019-06-28
- 2.0.3 — 2019-06-28
- 1.0.0 — 2019-01-19
- 0.4.1 — 2018-12-17
- 0.4.0 — 2018-12-17
- 0.3.0 — 2018-11-08

## README

<p align="center">
  <img width="186" height="90" src="https://user-images.githubusercontent.com/218949/44782765-377e7c80-ab80-11e8-9dd8-fce0e37c235b.png" alt="Beyonk" />
</p>

## Svelte Scroll Spy

[![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)

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>
```

---
_Source: https://npm.io/package/@beyonk/svelte-scrollspy · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._