PHPackages                             gaomingcode/is-in-viewport - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. gaomingcode/is-in-viewport

ActiveLibrary[Utility & Helpers](/categories/utility)

gaomingcode/is-in-viewport
==========================

An ultra-light jQuery plugin that tells you if an element is in the viewport but with a twist.

3.0.5(4y ago)012MIT

Since Jun 3Pushed 4y agoCompare

[ Source](https://github.com/gaomingcode/isInViewport)[ Packagist](https://packagist.org/packages/gaomingcode/is-in-viewport)[ Docs](https://isinviewport.mudit.xyz/)[ RSS](/packages/gaomingcode-is-in-viewport/feed)WikiDiscussions master Synced 2d ago

READMEChangelog (1)DependenciesVersions (2)Used By (0)

isInViewport.js
===============

[](#isinviewportjs)

[![GitHub Version](https://camo.githubusercontent.com/226fb3aed3537704227169099e4d5784210824acaab4425c17424ed14b536252/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f72656c656173652f67616f6d696e67636f64652f6973496e56696577706f72742e737667)](https://github.com/gaomingcode/isInViewport)[![Packagist Downloads](https://camo.githubusercontent.com/0dbb3c3807a781b746ac3814f560d9f23da891744d80250290ca28084de90f6d/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f646d2f67616f6d696e67636f64652f69732d696e2d76696577706f7274)](https://github.com/gaomingcode/isInViewport)[![Github License](https://camo.githubusercontent.com/3632636fa805f1b455078807da53c61a0a4a87b7e14fe3df37cbd3d509971e24/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f67616f6d696e67636f64652f6973496e56696577706f7274)](https://github.com/gaomingcode/isInViewport)

Installation
------------

[](#installation)

### Composer

[](#composer)

```
composer require gaomingcode/is-in-viewport

```

ReadMe from Origin
------------------

[](#readme-from-origin)

[![Build Status](https://camo.githubusercontent.com/e729107d4e890dc9374c0f68337a6c274722f3263244bf921e757bdb56b4bb90/68747470733a2f2f7472617669732d63692e6f72672f7a657573646575782f6973496e56696577706f72742e7376673f6272616e63683d6d6173746572)](https://travis-ci.org/zeusdeux/isInViewport)[![CDNJS](https://camo.githubusercontent.com/fb8ee5dc2a4df5bf5647187c964fefe254892a4ca57366d5cf691a70faec46e0/68747470733a2f2f696d672e736869656c64732e696f2f63646e6a732f762f69732d696e2d76696577706f72742e737667)](https://cdnjs.com/libraries/is-in-viewport)

An ultra-light jQuery plugin that tells you if the element is in the viewport, but with a twist.

Did you say [demo](http://www.isinviewport.mudit.xyz) (inclusive of tests)?

For a more performant alternative, please take a look at [observe-element-in-viewport](https://github.com/zeusdeux/observe-element-in-viewport) which uses the new `IntersectionObserver` API. Please keep in mind that you might have to ship a [polyfill](https://github.com/w3c/IntersectionObserver/tree/master/polyfill) for `IntersectionObserver` depending on the browsers you support.

**Note**: If you need this in a React application, please use the [use-is-in-viewport hook](https://github.com/zeusdeux/use-is-in-viewport).

Installation
------------

[](#installation-1)

#### Using in a module

[](#using-in-a-module)

```
npm install --save is-in-viewport
```

You can then `require('is-in-viewport')` or `import 'is-in-viewport'` in your code. It will automagically work with the bundler of your choice. If it breaks, please feel free to open an issue.

Example usage in an ES6/ES2015 module is shown [in the `examples/es6-example`](./examples/es6-example/) folder.

**Note**: `isInViewport` is a side-effecting module. It imports `jquery` that you have installed and attaches itself on it. As a consequence, `isInViewport` requires `jquery` to be installed as a peer dependency. Your bundling will fail if `jquery` isn't installed as [`is-in-viewport` `import`s `jquery`](./src/index.js#L1).

#### Using directly in a script tag

[](#using-directly-in-a-script-tag)

- Get the release that you want from [releases/tags](https://github.com/zeusdeux/isInViewport/releases) (or `bower install isInViewport` or `npm install --save is-in-viewport`)
- Copy/link either `isInViewport.js` or `isInViewport.min.js` and the respective sourcemap from the `lib` folder to your folder containing your scripts
- Add it after you include `jQuery`
- You're ready to go!

Usage
-----

[](#usage)

#### Basic usage

[](#basic-usage)

```
$( 'selector:in-viewport' )
```

When used as a selector it returns all the elements that match. Since it returns the element(s) it can *thus be chained* with other jQuery methods. It can also be used with jquery's `.is`.

###### Example:

[](#example)

```
$( 'div:in-viewport' ).css( 'background-color', 'red' );
// same as
var $div = $( 'div' );
if ( $div.is( ':in-viewport' ) ) {
  $div.css( 'background-color', 'red' );
}
```

Both of the above will set the `background-color` as `red` for all `div`s that are in the viewport.

#### Advanced usage

[](#advanced-usage)

##### Using `in-viewport` pseudo-selector

[](#using-in-viewport-pseudo-selector)

```
$( 'selector:in-viewport( tolerance[, viewport selector] )' )
```

This returns all the elements that are in the viewport while taking into account the `tolerance` criterion.

Since it returns the element(s) it can *thus be chained* with other jQuery methods.

When a viewport selector is specified, it uses that to calculate if the element is in *that* viewport or not.

When a viewport selector is *not* specified, it defaults to *window* as the viewport.

The viewport selector is any valid jQuery selector.

###### Defaults:

[](#defaults)

- `tolerance` defaults to `0`
- `viewport` defaults to `window`

###### Example:

[](#example-1)

```
//example 1
//the height of tolerance region is 100px from top of viewport
$( 'div:in-viewport( 100 )' ).css( 'background-color', 'red' );

//example 2
//the height of tolerance region is (viewport.height - 100px) from top of viewport
$( 'div:in-viewport( -100 )' ).css( 'background-color', 'green' );

//example 3
$('#viewport > div.box:in-viewport( 100, #viewport )').css( 'background-color', 'blue' )
                                                      .text( 'in viewport' );
```

**Example 1** will set the `background-color` as `red` for all `divs` that are in the viewport with a `tolerance` of `100px`.

**Example 2** will set the `background-color` as `green` for all `divs` that are in the viewport with a `tolerance` of `viewport height - 100px`. This lets the user conveniently provide a `tolerance` value closer to the viewport height without having to call `$(viewport).height()` all the time.

**Example 3** will set the `background-color` as `blue` and `text` as `in viewport` for all `divs` that are in the custom viewport given by `#viewport` and with a `tolerance` of `100px`.

With the advanced usage it becomes very easy to build things like menus with items that get auto-highlighted based on which section you are on, transition effects when an element comes into the viewport, etc.

See the examples in the `examples` directory for more clarity.

###### Note:

[](#note)

- When `tolerance` is `0` or `undefined` it is actually *equal to* `tolerance: $(viewport).height()` and *not* `0`.

This makes it easier for developers to have the whole `viewport` available to them as a valid `viewport`.

##### Using exposed `isInViewport` function

[](#using-exposed-isinviewport-function)

```
$( 'selector' ).isInViewport({ tolerance: tolerance, viewport: viewport })
```

This returns all the elements that are in the viewport while taking into account the `tolerance` criterion.

Since it returns the element(s) it can *thus be chained* with other jQuery methods.

When a viewport is specified, it uses that to calculate if the element is in *that* viewport or not.

When a viewport is *not* specified, it defaults to *window* as the viewport.

**The viewport is a valid DOM element or jQuery wrapped DOM element, NOT a selector string.**

###### Defaults:

[](#defaults-1)

- `tolerance` defaults to `0`
- `viewport` defaults to `window`

###### Example:

[](#example-2)

```
//example 1
//the height of tolerance region is 100px from top of viewport
$( 'div' ).isInViewport({ tolerance: 100 }).css( 'background-color', 'red' );

//example 2
//the height of tolerance region is (viewport.height - 100px) from top of viewport
$( 'div' ).isInViewport({ tolerance: -100 }).css( 'background-color', 'green' );

//example 3
var $viewport = $('#viewport');

$viewport
  .find('div.box')
  .isInViewport({ tolerance: 100, viewport: $viewport })
  .css( 'background-color', 'blue' )
  .text( 'in viewport' );
```

Support
-------

[](#support)

**Chrome, Firefox 3.5+, IE9+, Safari 5+, Opera 10.5+**

Note
----

[](#note-1)

- `:in-viewport` selector *does* support chaining.

Changelog
---------

[](#changelog)

`3.0.3`

- Use `jQuery.expr.pseudos` when found since `jQuery.expr[':']` is deprecated

`3.0.2`

- Support new rollup properties and get rid of removed rollups properties (`moduleId`, `moduleName`, etc)

`3.0.1`

- Fix jQuery no conflict mode issue (#39)

`3.0.0`

- Remove the deprecated `$(el).do` method
- Remove support for browsers < { IE9, Safari 5, Opera 10.5, Firefox 3.5 }
- Add support for modules and bundlers. You can now `import 'is-in-viewport'`/`require('is-in-viewport')` in your project (yay!)
- Add properly functioning sourcemaps for easier debugging

`2.4.2`

- Remove `postInstall` script which was breaking builds

`2.4.1`

- Undo `2.4.0` as `is-in-viewport` already exists on bower and isn't owned by me

`2.4.0`

- Update `bower.json` to comply with new validations
- Rename package on bower to match with that on npm i.e., `is-in-viewport`

`2.3.1`

- Remove unnecessary boolean coercion

`2.3.0`

- Re-exposed `isInViewport` with saner semantics. You can now pass options as JS objects to `isInViewport` and hence can now do things like: ```
    var $viewport = $();

    $viewport
      .find()
      .isInViewport({ tolerance: 100, viewport: $viewport }) //