# prokrutchik

> Draggable content scroller.

Latest version **3.0.2** (published 2022-06-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install prokrutchik
pnpm add prokrutchik
yarn add prokrutchik
bun add prokrutchik
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.2 |
| Published | 2022-06-05 |
| First published | 2017-03-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Node | >=14.16 |
| Dependencies | 0 |
| Unpacked size | 38.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Alex Bespoyasov |
| Maintainers | bespoyasov |
| Keywords | scroller, scroll, drag, drag-n-drop |

## Links

- npm: https://www.npmjs.com/package/prokrutchik
- Repository: https://github.com/bespoyasov/scroller
- Homepage: https://github.com/bespoyasov/scroller#readme
- Issues: https://github.com/bespoyasov/scroller/issues
- npm.io page: https://npm.io/package/prokrutchik

## Recent versions

- 3.0.2 (latest) — 2022-06-05
- 3.0.1 — 2022-05-29
- 3.0.0 — 2022-05-28
- 2.4.0 — 2021-08-16
- 2.3.9 — 2019-08-06
- 2.3.8 — 2019-01-26
- 2.3.7 — 2019-01-26
- 2.3.6 — 2018-10-31
- 2.3.5 — 2018-10-31
- 2.3.4 — 2018-06-24
- 2.3.3 — 2018-06-24
- 2.3.2 — 2018-06-24
- 2.3.1 — 2018-05-11
- 2.3.0 — 2018-04-10
- 2.2.4 — 2017-11-30
- … 16 more at https://npm.io/package/prokrutchik/versions

## README

# Scroller

Fast, light-weight (4KB gzip), and dependency-free content scroller.

https://user-images.githubusercontent.com/9102374/170833443-b9428466-a9fd-48e5-b18b-4c4089137dd5.mp4

For more examples of how it works with different settings and UI conditions, check out [this link](https://bespoyasov.ru/scroller/example/).

## Installation

Install Scroller with npm:

```shell
npm install prokrutchik
```

Add the scripts and styles to your project:

```js
import { Scroller } from "prokrutchik";
import "prokrutchik/styles.css";
```

Or add them directly to the HTML file:

```html
<script src="/path/to/prokrutchik/browser.js"></script>
<link href="/path/to/prokrutchik/styles.css" rel="stylesheet" />
```

## Initialization

By default, Scroller provides auto initialization for all the `.scroller` elements on the page:

```html
<ul class="scroller">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>
```

You can also initialize the instance manually:

```html
<ul class="foo">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

<script type="module">
  import { Scroller } from "prokrutchik";

  const instance = new Scroller({
    element: document.querySelector(".foo"),
  });
</script>
```

## Configuration

You can configure Scroller via `data-` attributes in HTML:

- `data-navigation`, shows/hides the navigation buttons, `"visible" | "hidden"`;
- `data-scrollbar`, shows/hides the scrollbar under the content, `"visible" | "hidden"`;
- `data-align`, specifies how to align the content if it fits the screen, `"start" | "center" | "end"`;
- `data-start-position`, initial position of the content, `number of px | "start" | "center" | "end"`;
- `data-start-duration`, starting animation duration, `number of milliseconds`.

Scroller items can be configured with:

- `data-anchor`, label of the item in the navigation, `string`;
- `data-focused`, if defined, Scroller will scroll to this item at the start.

### Using JavaScript

You can also configure Scroller using the config object:

```js
const scroller = new Scroller({
  element: document.querySelector(".foo"),

  // Show/hide the scrollbar, "visible" | "hidden":
  scrollbar: "hidden",

  // Show/hide the navigation, "visible" | "hidden":
  navigation: "hidden",

  // How to align content if it fits the screen, "start" | "center" | "end":
  align: "center",

  // Initial scroller content position, "start" | "center" | "end" | number of px:
  startPosition: "center",

  // Starting animation duration, number of milliseconds:
  startDuration: 500,
});
```

## Public API

Scroller provides API for changing current position, handling item clicks, and dynamically updating the config.

### Position Change

For position change, use the `scrollTo` method:

```js
// Scrolls to the beginning of the content
scroller.scrollTo("start");

// Scrolls to the center of the content:
scroller.scrollTo("center");

// Scrolls to the end of the content:
scroller.scrollTo("end");

// Scrolls to 100px from the start of the content:
scroller.scrollTo(100);

// Second optional parameter specifies
// the animation duration in milliseconds.
// Scrolls to center in 500 ms:
scroller.scrollTo("center", 500);
```

### Item Click Callback

For handling clicks on items, specify the `onItemClick` handler in the config:

```js
const scroller = new Scroller({
  element: document.querySelector(".foo"),
  onItemClick: (event) => {
    /* The `event` argument here is `TouchEvent` or `MouseEvent` depending on the user device. */
  },
});
```

### Config Updates

For configuration updates, use the `update` method:

```js
scroller.update({
  scrollbar: "hidden",
  navigation: "hidden",
  align: "center",
  onItemClick: someFunc,
});
```

## Examples

Scroller with disabled scrollbar, active navigation, and start alignment, configured via HTML data-attributes:

```html
<head>
  <link href="/path/to/prokrutchik/styles.css" rel="stylesheet" />
  <script src="/path/to/prokrutchik/browser.js" defer></script>
</head>

<body>
  <ul class="scroller" data-scrollbar="hidden" data-align="start">
    <img src="example.png" data-anchor="anchor1" />
    <div data-anchor="anchor2"></div>
    <table data-anchor="anchor3"></table>
    <!-- ... -->
  </div>
</body>
```

Scroller with the same settings configured via config object:

```js
import { Scroller } from "prokrutchik";
import "prokrutchik/styles.css";

const myScroller = new Scroller({
  el: document.querySelector(".foo"),
  scrollbar: "hidden",
  align: "start",
});
```

## Components

If you want to use Scroller with React or Vue, check out these packages:

- [React Scroller](https://github.com/bespoyasov/react-scroller)
- [Vue Scroller](https://github.com/bespoyasov/vue-scroller)

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