Skip to main content

Viewport

Viewport and visibility detection module

How to enable Viewport module?

Modular javascript​

If you are using the whole DoMini import, then no further actions are required.

import DoMini from domini;

For individual imports, make sure that the viewport module is loaded:

import "domini/dist/domini-core";
import "domini/dist/domini-viewport";

Via CDN​

If you are using the whole DoMini script, nothing else is required:

<script src="https://unpkg.com/domini@latest/dist/domini.js"></script>

For individual files, make sure the viewport file is included:

<script src="https://unpkg.com/domini@latest/dist/domini-core.js"></script>
<script src="https://unpkg.com/domini@latest/dist/domini-viewport.js"></script>

Included Methods​

.isInViewport( int tolerance, String|Element context): bool​

Checks if the current element is within the current viewport. This function is synchronous and does not use intersection observer or callback methods.

Parameters​

  • int tolerance (default: 0) - how many pixels of distance the detection can tolerate away from the element
  • String|Element context (default: window) - Element or QuerySelector for the context the viewport
// Is any part of the element visible
let myElementVisible = $('#myElement').inViewport();

// Is any part of the element visible in relation to #otherElement
let myElementVisible = $('#myElement').inViewport(0, "#otherElement");

// Is the element within the tolerance distance of the viewport
let myElementVisible = $('#myElement').inViewport(50);

/**
* Negative tolerance means, that the element is visible if that amount of
* portion of it is within the viewport from any side.
*/
let myElementVisible = $('#myElement').inViewport(-50);