dom-viewport

3.0.0 • Public • Published

dom-viewport

Measure and notify element regions inside the viewport (window).

Concept

//Get element bounds relative to the viewport.
var rect = viewport.elementRect(element);
//Determine wheter specified rect, with the optional inset is visible inside the viewport.
var visible = viewport.intersects(rect, inset);
//Observe element and notify changes to the delegate.
var region = viewport.createRegion(delegate, element, inset);
 
//Get region visibility.
region.visible;
 
//Get region bounds rect.
region.bounds;
 
//Dispose and stop Observe region.
region.dispose();

Examples

//Implement the delegate with visibility, position and size.
var delegate = {
    regionShow:function(region){
        //Element is visible.
    },
    regionHide:function(region){
        //Element is hidden.
    },
    regionScroll:function(region){
        //Wiewport scrolled and element has new position.
    },
    regionResize:function(region){
        //Wiewport resized and element has new size.
    }
};
//Create a new region for element.
var region = viewport.createRegion(delegate, element);
//Create a region with 10 pixels inset.
var inset = {top:10, right:10, bottom:10, left:10};
var region = viewport.createRegion(delegate, element, inset);

Readme

Keywords

Package Sidebar

Install

npm i dom-viewport

Weekly Downloads

2

Version

3.0.0

License

MIT

Last publish

Collaborators

  • samuelpetersson