# in-scroll-view

> Keep track of whether an element is in view or out of view.

Latest version **2.2.1** (published 2019-05-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install in-scroll-view
pnpm add in-scroll-view
yarn add in-scroll-view
bun add in-scroll-view
```

## 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 | 2.2.1 |
| Published | 2019-05-30 |
| First published | 2015-08-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 305.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | The C2 Group |
| Maintainers | thec2group |
| Keywords | scroll, viewport |

## Links

- npm: https://www.npmjs.com/package/in-scroll-view
- Repository: https://github.com/TheC2Group/in-scroll-view
- Issues: https://github.com/TheC2Group/in-scroll-view/issues
- npm.io page: https://npm.io/package/in-scroll-view

## Dependencies (2)

- [jquery](https://npm.io/package/jquery.md) >=3.4.0
- [c2-debounce-af](https://npm.io/package/c2-debounce-af.md) ^2.0.0

## Recent versions

- 2.2.1 (latest) — 2019-05-30
- 2.2.0 — 2019-05-29
- 2.1.1 — 2018-02-16
- 2.1.0 — 2015-11-23
- 2.0.2 — 2015-10-28
- 2.0.1 — 2015-10-28
- 2.0.0 — 2015-08-27

## README

in-scroll-view
==============

Keep track of whether an element is in view or out of view.


To get started
--------------

### CommonJS

```
$ npm install in-scroll-view
```

```js
var VIEW = require('in-scroll-view');
```

### Browser Global

```html
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="TheC2Group/debounce-af.js"></script>
<script src="iife/in-scroll-view.js"></script>
```

### Initialize

```js
// these options are the default options so this wouldn't be necessary.
var options = {
    percentInView: 0.75,
    attr: 'data-view',
    lock: '' // 'in' or 'out'
};

// Add items
VIEW.add('.section', options); // first parameter is anything jQuery accepts
```

Now when 75% of a "section" is in view, the attribute `data-view` will change from 'out' to 'in'.

If lock is set to 'in', an item is automatically removed when the status changes to 'in'.

### Additional methods

```js
// re-measure the window and items position
VIEW.measure();

// re-calculate the views based on scrollTop
// (this is automatically called with `measure`)
VIEW.scroll();

// unbind the events attached to the window
VIEW.unbindWindow();

// re-bind the events to the window
VIEW.bindWindow();

// listen to changes in an items status
VIEW.onChange(function (item) {

    if (item.$el.hasClass('section') && item.status === 'on') {

        // remove an item or an array of items
        VIEW.remove(item);
    }
});

// remove all items
VIEW.remove();
```


License
-------

MIT © [The C2 Group](https://c2experience.com)

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