# @sil/scroll-trigger

> A simple Vue Directive to trigger a class based on the element inview or not.

Latest version **1.1.2** (published 2019-07-25) · ISC license · 0 weekly downloads

## Install

```sh
npm install @sil/scroll-trigger
pnpm add @sil/scroll-trigger
yarn add @sil/scroll-trigger
bun add @sil/scroll-trigger
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.2 |
| Published | 2019-07-25 |
| First published | 2018-10-12 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 30.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Sil van Diepen |
| Maintainers | hacobvandipyan, silvandiepen |

## Links

- npm: https://www.npmjs.com/package/@sil/scroll-trigger
- npm.io page: https://npm.io/package/@sil/scroll-trigger

## Recent versions

- 1.1.2 (latest) — 2019-07-25
- 1.1.1 — 2019-07-25
- 1.1.0 — 2018-12-03
- 1.0.10 — 2018-12-03
- 1.0.9 — 2018-12-03
- 1.0.8 — 2018-12-03
- 1.0.7 — 2018-10-17
- 1.0.6 — 2018-10-17
- 1.0.5 — 2018-10-17
- 1.0.4 — 2018-10-17
- 1.0.3 — 2018-10-17
- 1.0.2 — 2018-10-17
- 1.0.1 — 2018-10-17
- 1.0.0 — 2018-10-12

## README

# Scroll Trigger

A simple Vue Directive to trigger a class based on the element inview or not. 


### Install

Install the package
`npm install @sil/scroll-trigger`


Import the package

`import ScrollTrigger from '~/@sil/scroll-trigger`

Define the component:

```js
	Vue.directive(ScrollTrigger);
```

Use the component with default values:

```html
<any-element v-scroll-trigger />	
```

Use the component with alternative values:
```html
<any-element v-scroll-trigger="{ elementClass: 'myTrigger', inActiveClass: 'myTrigger-inactive', activeClass: 'myTrigger-active' }" />	
```


### Settings

#### debug
Get logs and see whats happening in your console. 

default: `false`

#### relative
The position is being calculated in a relative way. This means that the translated value is calculated in the position
of the element. When you want to make this work from the original (positioned) position of an element. Use `relative: false` 

default: `true`

#### elementClass
The default class set on an element. 

default: `trigger`

#### activeClass
The default class set on an element when active. 

default: `active`

#### inActiveClass
The default class set on an element when inactive.

default: `inactive`

#### bemClass
When set, the element, active and inactiveclass are overruled. The bemClass is set as the main class with the following settings:
- elementClass: `[bemClass]__trigger`
- activeClass: `[bemClass]__trigger--active`
- inActiveClass: `[bemClass]__trigger--inactive`

default: `null`

#### startInactive
The trigger is always started as inactive, also when it is inview. This can be changed to false. 

default: `true`

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