{"id":13394827,"url":"https://github.com/ryanve/verge","last_synced_at":"2025-05-16T06:04:37.602Z","repository":{"id":3444139,"uuid":"4497037","full_name":"ryanve/verge","owner":"ryanve","description":"get viewport dimensions...detect elements in the viewport...trust in \u003c!DOCTYPE html\u003e","archived":false,"fork":false,"pushed_at":"2022-03-02T02:13:54.000Z","size":163,"stargazers_count":696,"open_issues_count":14,"forks_count":51,"subscribers_count":22,"default_branch":"master","last_synced_at":"2025-05-15T13:02:59.957Z","etag":null,"topics":["javascript","responsive-design","viewport","viewport-dimensions"],"latest_commit_sha":null,"homepage":"https://ryanve.dev/verge","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/ryanve.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"ryanve","ko_fi":"ryanve"}},"created_at":"2012-05-30T16:21:23.000Z","updated_at":"2025-04-29T12:45:21.000Z","dependencies_parsed_at":"2022-09-19T06:10:43.075Z","dependency_job_id":null,"html_url":"https://github.com/ryanve/verge","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanve%2Fverge","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanve%2Fverge/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanve%2Fverge/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanve%2Fverge/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ryanve","download_url":"https://codeload.github.com/ryanve/verge/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254478186,"owners_count":22077675,"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":["javascript","responsive-design","viewport","viewport-dimensions"],"created_at":"2024-07-30T17:01:32.972Z","updated_at":"2025-05-16T06:04:37.583Z","avatar_url":"https://github.com/ryanve.png","language":"JavaScript","readme":"# verge\n\n\u003cb\u003everge\u003c/b\u003e is a compact set of cross-browser viewport utilities written in native JavaScript. It includes the ability to detect if an element is in the current viewport. It works as a standalone module, an [ender](#ender) module, or as a [jQuery](#jquery) plugin. (\u003cb\u003enpm\u003c/b\u003e: [verge](https://www.npmjs.org/package/verge))\n\n## API\n\n- \u003ca href=\"#viewportw\"\u003e\u003cb\u003e.viewportW()\u003c/b\u003e\u003c/a\u003e\n- \u003ca href=\"#viewporth\"\u003e\u003cb\u003e.viewportH()\u003c/b\u003e\u003c/a\u003e\n- \u003ca href=\"#viewport\"\u003e\u003cb\u003e.viewport()\u003c/b\u003e\u003c/a\u003e \u003cb\u003e1.8+\u003c/b\u003e\n- \u003ca href=\"#inviewport\"\u003e\u003cb\u003e.inViewport()\u003c/b\u003e\u003c/a\u003e\n- \u003ca href=\"#inx\"\u003e\u003cb\u003e.inX()\u003c/b\u003e\u003c/a\u003e\n- \u003ca href=\"#iny\"\u003e\u003cb\u003e.inY()\u003c/b\u003e\u003c/a\u003e\n- \u003ca href=\"#scrollx\"\u003e\u003cb\u003e.scrollX()\u003c/b\u003e\u003c/a\u003e\n- \u003ca href=\"#scrolly\"\u003e\u003cb\u003e.scrollY()\u003c/b\u003e\u003c/a\u003e\n- \u003ca href=\"#mq\"\u003e\u003cb\u003e.mq()\u003c/b\u003e\u003c/a\u003e \u003cb\u003e1.6+\u003c/b\u003e\n- \u003ca href=\"#rectangle\"\u003e\u003cb\u003e.rectangle()\u003c/b\u003e\u003c/a\u003e\n- \u003ca href=\"#aspect\"\u003e\u003cb\u003e.aspect()\u003c/b\u003e\u003c/a\u003e \u003cb\u003e1.7+\u003c/b\u003e\n\n#### Accuracy\n\n- [Requires](https://github.com/ryanve/verge/issues/22#issuecomment-341944009) `\u003c!DOCTYPE html\u003e`\n- \u003cb\u003everge\u003c/b\u003e's viewport methods represent the [CSS viewport](http://www.w3.org/TR/CSS2/visuren.html#viewport): the [`@media (width)`](http://dev.w3.org/csswg/mediaqueries4/#width) and [`@media (height)`](http://dev.w3.org/csswg/mediaqueries4/#height) breakpoints.\n- At certain zooms the viewport dimensions given by \u003cb\u003everge\u003c/b\u003e may be 1px off the expected `@media` value due to native rounding. For greater precision (at a slight speed tradeoff) consider [\u003cb\u003eactual\u003c/b\u003e](https://github.com/ryanve/actual).\n\n***\n\n### .viewportW()\n\n```js\nverge.viewportW() // -\u003e viewport width in pixels\n```\n\n### .viewportH()\n\n```js\nverge.viewportH() // -\u003e viewport height in pixels\n```\n\n### .viewport()\n\nGet \u003cb\u003eboth\u003c/b\u003e CSS viewport dimensions as an \u003cb\u003eobject\u003c/b\u003e with width and height properties.\n\n```js\nverge.viewportW() === verge.viewport().width  // always true\nverge.viewportH() === verge.viewport().height // always true\n```\n\nThe [`.viewportW()`](#viewportw) syntax is slightly faster.\n\n### .inViewport()\n\nTest if any part of an element (or the first element in a matched set) is in the current viewport. Returns **boolean**.\n\n```js\nverge.inViewport(elem) // true if elem is in the current viewport\nverge.inViewport(elem, 100) // true if elem is in the current viewport or within 100px of it\nverge.inViewport(elem, -100) // true if elem is in the current viewport and not within 99px of the edge\n```\n\n#### Performance tip for sites that only scroll along **1** axis\n\n```js\nverge.inViewport(elem) === verge.inX(elem) \u0026\u0026 verge.inY(elem) // always true\n```\n\n##### Substitute [inViewport](#inviewport) with: [inY](#iny) on *vertical* sites, [inX](#inx) on *horizontal* ones.\n\n- On pages without horizontal scroll, [inX](#inx) is always `true`.\n- On pages without vertical scroll, [inY](#iny) is always `true`.\n- If the viewport width is `\u003e=` the `document` width, then [inX](#inx) is always `true`.\n\n### .inX()\n\nTest if any part of an element (or the first element in a matched set) is in the same x-axis section as the viewport. Returns **boolean**.\n\n```js\nverge.inX(elem) // true if elem is in same x-axis as the viewport (exact)\nverge.inX(elem, 100) // true if elem is in same x-axis as the viewport or within 100px of it\nverge.inX(elem, -100) // true if elem in is the viewport and not within 99px of the edge\n```\n\n### .inY()\n\nTest if any part of an element (or the first element in a matched set) is in the same y-axis section as the viewport. Returns **boolean**.\n\n```js\nverge.inY(elem) // true if elem is in same y-axis as the viewport (exact)\nverge.inY(elem, 100) // true if elem is in same y-axis as the viewport or within 100px of it\nverge.inY(elem, -100) // true if elem in is the viewport and not within 99px of the edge\n```\n\n### .scrollX()\n\nGet the \u003cb\u003ehorizontal\u003c/b\u003e scroll position in pixels. (Like [`window.scrollX`](https://developer.mozilla.org/en-US/docs/Web/API/Window.scrollX), but cross-browser.)\n\n```js\nverge.scrollX() // -\u003e horizontal pixels scrolled\n```\n\n### .scrollY()\n\nGet the \u003cb\u003evertical\u003c/b\u003e scroll position in pixels. (Like [`window.scrollY`](https://developer.mozilla.org/en-US/docs/Web/API/Window.scrollY), but cross-browser.)\n\n```js\nverge.scrollY() // -\u003e vertical pixels scrolled\n```\n\n### .mq()\n#### .mq(mediaQueryString)\n\nTest if a [media query](http://airve.com/mq/) is active.\n\n```js\nverge.mq('(min-color:2)') // -\u003e boolean\nverge.mq('tv') // -\u003e boolean\n```\n\n### .rectangle()\n#### .rectangle(element, cushion?)\n\nGet an a \u003cb\u003eobject\u003c/b\u003e containing the properties `top`, `bottom`, `left`, `right`, `width`, and `height` with respect to the top-left corner of the current viewport, and with an optional cushion amount. Its return is like that of the native [getBoundingClientRect](https://developer.mozilla.org/en/DOM/element.getBoundingClientRect).\n\nThe optional \u003cb\u003ecushion\u003c/b\u003e parameter is an amount of pixels to act as a cushion around the element. If none is provided then it defaults to `0` and the rectangle will match the native rectangle. If a cushion is specified, the properties are adjusted according to the cushion amount. If the cushion is **positive** the rectangle will represent an area that is larger that the actual element. If the cushion is **negative** then the rectangle will represent an area that is **smaller** that the actual element.\n\n```js\nverge.rectangle(element) // rectangle object\nverge.rectangle(element, 100) // rectangle object adjusted by 100 pixels\n```\n\n### .aspect()\n#### .aspect(object?)\n\nGet the aspect ratio of the viewport \u003cb\u003eor\u003c/b\u003e of an object with width/height properties.\n\n```js\nverge.aspect() // -\u003e viewport aspect ratio\nverge.aspect(element) // -\u003e element aspect ratio\nverge.aspect(screen) // -\u003e device aspect ratio\n1 \u003c verge.aspect() // =\u003e landscape orientation\n```\n\n## Integrate\n\n### [jQuery](http://jquery.com)\n\n```js\njQuery.extend(verge)\n```\n\n### [ender](https://github.com/ender-js)\n\n```sh\nender build verge\n```\n\n## Contribute\n\nContribute by making edits in [`./src`](./src) or reporting [issues](../../issues).\n\n```sh\nnpm install\nnpm test\n```\n","funding_links":["https://github.com/sponsors/ryanve","https://ko-fi.com/ryanve"],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanve%2Fverge","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fryanve%2Fverge","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanve%2Fverge/lists"}