# scroll-pager

> - 2022.03.21 By csslick - 콘텐츠 스크롤시 페이지 위치를 감지하는 pager UI - demo: https://csslick.github.io/scroll-pager/

Latest version **0.0.0** (published 2022-03-23) · 0 weekly downloads

## Install

```sh
npm install scroll-pager
pnpm add scroll-pager
yarn add scroll-pager
bun add scroll-pager
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.0 |
| Published | 2022-03-23 |
| First published | 2022-03-23 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 5.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | csslick |

## Links

- npm: https://www.npmjs.com/package/scroll-pager
- npm.io page: https://npm.io/package/scroll-pager

## Recent versions

- 0.0.0 (latest) — 2022-03-23

## README

# scrollpager.js
- 2022.03.21 By csslick
- 콘텐츠 스크롤시 페이지 위치를 감지하는 pager UI
- demo: https://csslick.github.io/scroll-pager/

## How to use

```
<head>
  ...
  <link rel="stylesheet" href="./scrollPager.css">
  <script src="./scrollPager.js"></script>
</head>
```

CDN
```
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/csslick/scroll-pager/scrollPager.min.css">
  <script src="https://cdn.jsdelivr.net/gh/csslick/scroll-pager@latest/scrollPager.min.js"></script>
```

```
<body>
  <!-- pager UI -->
  <nav class="side-pager">
  </nav>

  <!-- scroll contents, class='pager' -->
  <section id="s1" class='page'>
    <h1>section 1</h1>
  </section>
  <section id="s2" class='page'>
    <h2>section 2</h2>
  </section>
  <section id="s3" class='page'>
    <h2>section 3</h2>
  </section>

  <script>
    // Init scroll pager
    scrollPager();
  </script>
</body>
```


## Options
```
  scrollPager({
      offset: 150,  // 위치 조정값,
      showNum: false,  // 숫자 표시 유무
  );

```

## 디자인 수정
scrollPager.css를 수정하면 됨

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