# way-on-screen

> Detection when the element on the screen and show in percentages how much of it shows on the screen.

Latest version **1.0.2** (published 2017-12-03) · ISC license · 0 weekly downloads

## Install

```sh
npm install way-on-screen
pnpm add way-on-screen
yarn add way-on-screen
bun add way-on-screen
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2017-12-03 |
| First published | 2017-12-03 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | NPM User |
| Maintainers | wh2ts0n |
| Keywords | detect, scroll, screen, whats0n |

## Links

- npm: https://www.npmjs.com/package/way-on-screen
- Repository: https://github.com/whats0n/way-on-screen
- Homepage: https://github.com/whats0n/way-on-screen#readme
- Issues: https://github.com/whats0n/way-on-screen/issues
- npm.io page: https://npm.io/package/way-on-screen

## Recent versions

- 1.0.2 (latest) — 2017-12-03
- 1.0.1 — 2017-12-03
- 1.0.0 — 2017-12-03

## README

Simple plugin for detection when the item on the screen (by bottom lane) and show in percentages how much of the item shows on the screen.

## Installation
```
$ npm install --save way-on-screen
```

## Usage
### Webpack
```js
var WayOnScreen = require('way-on-screen');
//or 
import WayOnScreen from 'way-on-screen';
// run module here
```
### Old school files way ([example.html](https://whats0n.github.io/way-on-screen/example/index.html)):
```html
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="RUN_MODULE_HERE.js"></script>
```
## Running
```js
var DetectItemOnSceen = new WayOnScreen(css-selector, options);
DetectItemOnSceen.init();
// options reference in next section
```

#### Parameters (options)
```js
{
  //Set, in percent, the entry point from the bottom of the screen.
  threshold: 30 //a number
  
  //Callback funcitons
  //argument is an object with current item (section), percent (percent) and direction (direction).
  onEnter: function(props) 
  onExit: function(props)
  onScroll: function(props) 
}
```

## Methods
### init
Method for initialize detection.
```js
DetectItemOnScreen.init();
```
### onScroll (callback)
Calls every time on scroll when the top of the element offset more than or equal to the start point (at the bottom of the screen) and the lower bound of the element offset is less than or equal to the start point.
```js
DetectItemOnScreen.onScroll(function(props) {
  console.log(props);
});
```
### onEnter (callback)
Calls when the top of the element offset more than or equal to the start point (at the bottom of the screen)
```js
DetectItemOnScreen.onEnter(function(props) {
  console.log(props);
});
```
### onExit (callback)
Calls when the lower bound of the element offset is less than or equal to the start point (at the bottom of the screen)
```js
DetectItemOnScreen.onExit(function(props) {
  console.log(props);
});
```

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