dom-viewport v3.0.0

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);