Verge

get viewport dimensions...detect elements in the viewport...trust in <!DOCTYPE html>

Generate Convert Improve

Install / Use

/learn @ryanve/Verge

About this skill

Quality Score

0/100

README

verge

verge 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 module, or as a jQuery plugin. (npm: verge)

API

<a href="#viewportw">.viewportW()</a>
<a href="#viewporth">.viewportH()</a>
<a href="#viewport">.viewport()</a> 1.8+
<a href="#inviewport">.inViewport()</a>
<a href="#inx">.inX()</a>
<a href="#iny">.inY()</a>
<a href="#scrollx">.scrollX()</a>
<a href="#scrolly">.scrollY()</a>
<a href="#mq">.mq()</a> 1.6+
<a href="#rectangle">.rectangle()</a>
<a href="#aspect">.aspect()</a> 1.7+

Accuracy

Requires <!DOCTYPE html>
verge's viewport methods represent the CSS viewport: the @media (width) and @media (height) breakpoints.
At certain zooms the viewport dimensions given by verge may be 1px off the expected @media value due to native rounding. For greater precision (at a slight speed tradeoff) consider actual.

.viewportW()

verge.viewportW() // -> viewport width in pixels

.viewportH()

verge.viewportH() // -> viewport height in pixels

.viewport()

Get both CSS viewport dimensions as an object with width and height properties.

verge.viewportW() === verge.viewport().width  // always true
verge.viewportH() === verge.viewport().height // always true

The .viewportW() syntax is slightly faster.

.inViewport()

Test if any part of an element (or the first element in a matched set) is in the current viewport. Returns boolean.

verge.inViewport(elem) // true if elem is in the current viewport
verge.inViewport(elem, 100) // true if elem is in the current viewport or within 100px of it
verge.inViewport(elem, -100) // true if elem is in the current viewport and not within 99px of the edge

Performance tip for sites that only scroll along 1 axis

verge.inViewport(elem) === verge.inX(elem) && verge.inY(elem) // always true

Substitute inViewport with: inY on vertical sites, inX on horizontal ones.

On pages without horizontal scroll, inX is always true.
On pages without vertical scroll, inY is always true.
If the viewport width is >= the document width, then inX is always true.

.inX()

Test 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.

verge.inX(elem) // true if elem is in same x-axis as the viewport (exact)
verge.inX(elem, 100) // true if elem is in same x-axis as the viewport or within 100px of it
verge.inX(elem, -100) // true if elem in is the viewport and not within 99px of the edge

.inY()

Test 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.

verge.inY(elem) // true if elem is in same y-axis as the viewport (exact)
verge.inY(elem, 100) // true if elem is in same y-axis as the viewport or within 100px of it
verge.inY(elem, -100) // true if elem in is the viewport and not within 99px of the edge

.scrollX()

Get the horizontal scroll position in pixels. (Like window.scrollX, but cross-browser.)

verge.scrollX() // -> horizontal pixels scrolled

.scrollY()

Get the vertical scroll position in pixels. (Like window.scrollY, but cross-browser.)

verge.scrollY() // -> vertical pixels scrolled

.mq()

.mq(mediaQueryString)

Test if a media query is active.

verge.mq('(min-color:2)') // -> boolean
verge.mq('tv') // -> boolean

.rectangle()

.rectangle(element, cushion?)

Get an a object 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.

The optional cushion 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.

verge.rectangle(element) // rectangle object
verge.rectangle(element, 100) // rectangle object adjusted by 100 pixels

.aspect()

.aspect(object?)

Get the aspect ratio of the viewport or of an object with width/height properties.

verge.aspect() // -> viewport aspect ratio
verge.aspect(element) // -> element aspect ratio
verge.aspect(screen) // -> device aspect ratio
1 < verge.aspect() // => landscape orientation

Integrate

jQuery

jQuery.extend(verge)

ender

ender build verge

Contribute

Contribute by making edits in ./src or reporting issues.

npm install
npm test

Related Skills

diffs

342.5k

Use the diffs tool to produce real, shareable diffs (viewer URL, file artifact, or both) instead of manual edit summaries.

clearshot

Structured screenshot analysis for UI implementation and critique. Analyzes every UI screenshot with a 5×5 spatial grid, full element inventory, and design system extraction — facts and taste together, every time. Escalates to full implementation blueprint when building. Trigger on any digital interface image file (png, jpg, gif, webp — websites, apps, dashboards, mockups, wireframes) or commands like 'analyse this screenshot,' 'rebuild this,' 'match this design,' 'clone this.' Skip for non-UI images (photos, memes, charts) unless the user explicitly wants to build a UI from them. Does NOT trigger on HTML source code, CSS, SVGs, or any code pasted as text.

openpencil

1.9k

The world's first open-source AI-native vector design tool and the first to feature concurrent Agent Teams. Design-as-Code. Turn prompts into UI directly on the live canvas. A modern alternative to Pencil.

ui-ux-pro-max-skill

55.6k

An AI SKILL that provide design intelligence for building professional UI/UX multiple platforms