{"id":16095737,"url":"https://github.com/zeusdeux/isinviewport","last_synced_at":"2025-05-15T20:06:07.666Z","repository":{"id":10801605,"uuid":"13073794","full_name":"zeusdeux/isInViewport","owner":"zeusdeux","description":"An ultra-light jQuery plugin that tells you if an element is in the viewport but with a twist.","archived":false,"fork":false,"pushed_at":"2019-05-24T12:56:53.000Z","size":321,"stargazers_count":652,"open_issues_count":2,"forks_count":157,"subscribers_count":27,"default_branch":"master","last_synced_at":"2025-05-15T20:05:50.327Z","etag":null,"topics":["jquery","jquery-plugin","viewport"],"latest_commit_sha":null,"homepage":"https://isinviewport.mudit.xyz","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zeusdeux.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"license.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-09-24T19:01:23.000Z","updated_at":"2025-04-08T22:09:06.000Z","dependencies_parsed_at":"2022-09-16T03:40:14.749Z","dependency_job_id":null,"html_url":"https://github.com/zeusdeux/isInViewport","commit_stats":null,"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeusdeux%2FisInViewport","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeusdeux%2FisInViewport/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeusdeux%2FisInViewport/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeusdeux%2FisInViewport/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zeusdeux","download_url":"https://codeload.github.com/zeusdeux/isInViewport/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254414499,"owners_count":22067272,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["jquery","jquery-plugin","viewport"],"created_at":"2024-10-09T17:08:26.738Z","updated_at":"2025-05-15T20:06:02.609Z","avatar_url":"https://github.com/zeusdeux.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"isInViewport.js\n================\n[![Build Status](https://travis-ci.org/zeusdeux/isInViewport.svg?branch=master)](https://travis-ci.org/zeusdeux/isInViewport)\n[![CDNJS](https://img.shields.io/cdnjs/v/is-in-viewport.svg)](https://cdnjs.com/libraries/is-in-viewport)\n\nAn ultra-light jQuery plugin that tells you if the element is in the viewport, but with a twist.\n\nDid you say [demo](http://www.isinviewport.mudit.xyz) (inclusive of tests)?\n\nFor 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.\n\n**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).\n\nInstallation\n----------------\n#### Using in a module\n\n```js\nnpm install --save is-in-viewport\n```\nYou can then `require('is-in-viewport')` or `import 'is-in-viewport'` in your code.\nIt will automagically work with the bundler of your choice. If it breaks, please feel free to open an issue.\n\nExample usage in an ES6/ES2015 module is shown [in the `examples/es6-example`](./examples/es6-example/) folder.\n\n__Note__: `isInViewport` is a side-effecting module. It imports `jquery` that you have installed and attaches itself on it.\nAs a consequence, `isInViewport` requires `jquery` to be installed as a peer dependency.\nYour bundling will fail if `jquery` isn't installed as [`is-in-viewport` `import`s `jquery`](./src/index.js#L1).\n\n#### Using directly in a script tag\n\n- 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`)\n- Copy/link either `isInViewport.js` or `isInViewport.min.js` and the respective sourcemap from the `lib` folder to your folder containing your scripts\n- Add it after you include `jQuery`\n- You're ready to go!\n\nUsage\n----------------\n\u003ca name=\"bu\"/\u003e\n\n#### Basic usage\n\n```javascript\n$( 'selector:in-viewport' )\n```\nWhen 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`.\n\n###### Example:\n```javascript\n$( 'div:in-viewport' ).css( 'background-color', 'red' );\n// same as\nvar $div = $( 'div' );\nif ( $div.is( ':in-viewport' ) ) {\n  $div.css( 'background-color', 'red' );\n}\n```\nBoth of the above will set the `background-color` as `red` for all `div`s that are in the viewport.\n\n#### Advanced usage\n\n##### Using `in-viewport` pseudo-selector\n\n```javascript\n$( 'selector:in-viewport( tolerance[, viewport selector] )' )\n```\nThis returns all the elements that are in the viewport while taking into account the `tolerance` criterion.\n\nSince it returns the element(s) it can *thus be chained* with other jQuery methods.\n\nWhen a viewport selector is specified, it uses that to calculate if the element is in *that* viewport or not.\n\nWhen a viewport selector is *not* specified, it defaults to *window* as the viewport.\n\nThe viewport selector is any valid jQuery selector.\n\n###### Defaults:\n- `tolerance` defaults to `0`\n- `viewport` defaults to `window`\n\n###### Example:\n```javascript\n//example 1\n//the height of tolerance region is 100px from top of viewport\n$( 'div:in-viewport( 100 )' ).css( 'background-color', 'red' );\n\n//example 2\n//the height of tolerance region is (viewport.height - 100px) from top of viewport\n$( 'div:in-viewport( -100 )' ).css( 'background-color', 'green' );\n\n//example 3\n$('#viewport \u003e div.box:in-viewport( 100, #viewport )').css( 'background-color', 'blue' )\n                                                      .text( 'in viewport' );\n```\n\n__Example 1__ will set the `background-color` as `red` for all `divs` that are in the viewport with a `tolerance` of `100px`.\n\n__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.\n\n__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`.\n\nWith 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.\n\nSee the examples in the `examples` directory for more clarity.\n\n###### Note:\n- When `tolerance` is `0` or `undefined` it is actually *equal to* `tolerance: $(viewport).height()` and *not* `0`.\n\nThis makes it easier for developers to have the whole `viewport` available to them as a valid `viewport`.\n\n\n##### Using exposed `isInViewport` function\n\n```javascript\n$( 'selector' ).isInViewport({ tolerance: tolerance, viewport: viewport })\n```\nThis returns all the elements that are in the viewport while taking into account the `tolerance` criterion.\n\nSince it returns the element(s) it can *thus be chained* with other jQuery methods.\n\nWhen a viewport is specified, it uses that to calculate if the element is in *that* viewport or not.\n\nWhen a viewport is *not* specified, it defaults to *window* as the viewport.\n\n**The viewport is a valid DOM element or jQuery wrapped DOM element, NOT a selector string.**\n\n###### Defaults:\n- `tolerance` defaults to `0`\n- `viewport` defaults to `window`\n\n###### Example:\n```javascript\n//example 1\n//the height of tolerance region is 100px from top of viewport\n$( 'div' ).isInViewport({ tolerance: 100 }).css( 'background-color', 'red' );\n\n//example 2\n//the height of tolerance region is (viewport.height - 100px) from top of viewport\n$( 'div' ).isInViewport({ tolerance: -100 }).css( 'background-color', 'green' );\n\n//example 3\nvar $viewport = $('#viewport');\n\n$viewport\n  .find('div.box')\n  .isInViewport({ tolerance: 100, viewport: $viewport })\n  .css( 'background-color', 'blue' )\n  .text( 'in viewport' );\n```\n\n\n## Support\n__Chrome, Firefox 3.5+, IE9+, Safari 5+, Opera 10.5+__\n\n## Note\n- `:in-viewport` selector *does* support chaining.\n\nChangelog\n----------------\n`3.0.3`\n\n- Use `jQuery.expr.pseudos` when found since `jQuery.expr[':']` is deprecated\n\n`3.0.2`\n\n- Support new rollup properties and get rid of removed rollups properties (`moduleId`, `moduleName`, etc)\n\n`3.0.1`\n\n- Fix jQuery no conflict mode issue (#39)\n\n`3.0.0`\n\n- Remove the deprecated `$(el).do` method\n- Remove support for browsers \u003c { IE9, Safari 5, Opera 10.5, Firefox 3.5 }\n- Add support for modules and bundlers. You can now `import 'is-in-viewport'`/`require('is-in-viewport')` in your project (yay!)\n- Add properly functioning sourcemaps for easier debugging\n\n`2.4.2`\n\n- Remove `postInstall` script which was breaking builds\n\n`2.4.1`\n\n- Undo `2.4.0` as `is-in-viewport` already exists on bower and isn't owned by me\n\n`2.4.0`\n\n- Update `bower.json` to comply with new validations\n- Rename package on bower to match with that on npm i.e., `is-in-viewport`\n\n`2.3.1`\n\n- Remove unnecessary boolean coercion\n\n`2.3.0`\n\n- Re-exposed `isInViewport` with saner semantics. You can now pass options as JS objects to `isInViewport` and hence can now do things like:\n  ```javascript\n  var $viewport = $(\u003cviewport selector\u003e);\n\n  $viewport\n    .find(\u003cselector for elements\u003e)\n    .isInViewport({ tolerance: 100, viewport: $viewport }) // \u003c- passing the viewport jQuery object in directly\n    .css(color: 'red');\n  ```\n- Deprecated `do` in favour of `run`\n- When available, `isInViewport` now uses `Sizzle.selectors.createPseudo`\n\n`2.2.5`\n\n- Updated readme to point to new demo. Mostly a bump for npm to pickup the new readme.\n\n`2.2.4`\n\n- Pulled [#15](https://github.com/zeusdeux/isInViewport/pull/15)(fixes horizontal viewport check)\n\n`2.2.3`\n\n- Allow use as CommonJS -\u003e [#19](https://github.com/zeusdeux/isInViewport/pull/19)\n- Fixed gruntfile. It now generates proper filenames during build.\n\n`2.2.2`\n\n- Published to `npm`\n- Updated install instructions to include `npm`\n\n`2.2.1`\n\n- Pulled in a few bugfixes\n- Fixed ie8 bugs\n\n`2.2.0`\n\n- Aliased the `.do` method with `.run` since `do` is a reserved word and errors out when used as a property in IE. To be on the safer side, use `.run` to chain any arbitrary function or an array of functions.\n\n`2.1.0`\n\n- Added a `.do` method that lets the user chain any arbitrary function or an array of functions. Example:\n\n```javascript\n//usage 1: pass a function\n$( 'div:in-viewport' )\n  .do(function(){\n    console.log( this ); //will log the current jQuery element object it's being called on\n  })\n  .css( 'background-color', 'red' );\n\n//usage 2: pass an array of functions\nvar fnArray = [\n                function(){ console.log(\"Fn 1: %o\", this); },\n                function(){ console.log(\"Fn 2: %o\", this); }\n                //or say another function that maybe adds\n                //elements to be tracked when in viewport\n              ];\n$( 'div:in-viewport' ).do(fnArray);\n```\n\n`2.0.0`\n\n- Added support for negative `tolerance` values that are now relative to the `viewport` height\n- Added support for custom viewport selector (see [Advanced usage](#advanced-usage))\n- Added support for checking if an element is in viewport both horizontally and vertically. (checks both now)\n- Removed support for the old usage syntax in favour of the `:in-viewport` selector i.e.,\n```javascript\n//removed\n$( selector ).isInViewport( {\"tolerance\" :100, \"debug\": true} )\n\n//current usage\n$( 'selector:in-viewport( 100 )' )\n```\n- Removed the `debug` option because, lets be honest, no one really used it.\n- Removed the weird code that handled *end of page* condition in the core. It's the user's\nprerogative to do what he/she wants when their page is scrolled to *end of page*.\n\n`1.1.1`\n\n- Added `bower` support.\n\n`1.1.0`\n\n- Added support for `:in-viewport` selector as per [joeframbach's](http://www.reddit.com/user/joeframbach) suggestion.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzeusdeux%2Fisinviewport","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzeusdeux%2Fisinviewport","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzeusdeux%2Fisinviewport/lists"}