AngularJS directive to check if a DOM element is in the viewport
npm install angular-inviewCheck if a DOM element is or not in the browser current visible viewport.
``html`
This is a directive for AngularJS 1, support for Angular 2 is not in the works yet (PRs are welcome!)
> Version 2 of this directive uses a lightwight embedded reactive framework and
it is a complete rewrite of v1
`
npm install angular-inview
`
bower install angular-inview
In your document include this scripts:
`html`
In your AngularJS app, you'll need to import the angular-inview module:
`javascript`
angular.module('myModule', ['angular-inview']);
Or with a module loader setup like Webpack/Babel you can do:
`javascript
import angularInview from 'angular-inview';
angular.module('myModule', [angularInview]);
`
This module will define two directives: in-view and in-view-container.
`html`
The in-view attribute must contain a valid AngularJS expression
to work. When the DOM element enters or exits the viewport, the expression will
be evaluated. To actually check if the element is in view, the following data is
available in the expression:
- $inview is a boolean value indicating if the DOM element is in view.
If using this directive for infinite scrolling, you may want to use this like
.
- $inviewInfo is an object containing extra info regarding the event
`
{
changed:
event:
element:
elementRect: {
top:
left:
bottom:
right:
},
viewportRect: {
top:
left:
bottom:
right:
},
direction: { // if generateDirection option is true
vertical:
horizontal:
},
parts: { // if generateParts option is true
top:
left:
bottom:
right:
},
}
- changed indicates if the inview value changed with this eventevent
- the DOM event that triggered the inview checkelement
- the DOM element subject of the inview checkelementRect
- a rectangle with the virtual (considering offset) position ofviewportRect
the element used for the inview check
- a rectangle with the virtual (considering offset) viewportdirection
dimensions used for the inview check
- an indication of how the element has moved from the last eventdirection.vertical
relative to the viewport. Ie. if you scoll the page down by 100 pixels, the
value of will be -100
- an indication of which side of the element are fully visible. Ie. ifparts.top=false
and parts.bottom=true it means that the bottom part of
the element is visible at the top of the viewport (but its top part is
hidden behind the browser bar)
An additional attribute in-view-options can be specified with an object value containing:
- offset: An expression returning an array of values to offset the element position.
Offsets are expressed as arrays of 4 values [top, right, bottom, left].[top/bottom, left/right]
Like CSS, you can also specify only 2 values .
Values can be either a string with a percentage or numbers (in pixel).
Positive values are offsets outside the element rectangle and
negative values are offsets to the inside.
Example valid values for the offset are: 100, [200, 0],[100, 0, 200, 50]
, '20%', ['50%', 30]
- viewportOffset: Like the element offset but appied to the viewport. You may['-50%', 0, 0]
want to use this to shrink the virtual viewport effectivelly checking if your
element is visible (i.e.) in the bottom part of the screen .
- generateDirection: Indicate if the direction information should$inviewInfo
be included in (default false).
- generateParts: Indicate if the parts information should$inviewInfo
be included in (default false).
- throttle: a number indicating a millisecond value of throttle which will
limit the in-view event firing rate to happen every that many milliseconds
Use in-view-container when you have a scrollable container that contains in-view
elements. When an element is inside such container, it will properly
trigger callbacks when the container scrolls as well as when the window scrolls.
`html`
The following triggers the lineInView when the line comes in view:
`html`
See more examples in the examples folder.
Version 1 of this directive can still be installed with
npm install angular-inview@1.5.7. If you already have v1 and want to
upgrade to v2 here are some tips:
- throttle option replaces debounce. You can just change the name. Notice thatoffset
the functioning has changed as well, a debounce waits until there are no more
events for the given amount of time before triggering; throttle instead stabilizes
the event triggering only once every amount of time. In practival terms this
should not affect negativelly your app.
- and viewportOffset replace the old offset options in a more structuredoffsetTop: 100
and flexible way. becomes offset: [100, 0, 0, 0].$inviewInfo.event
- replaces $event in the expression.generateParts
- in the options has now to be set to true to have$inviewInfo.parts
available.
1. Fork this repo
2. Setup your new repo with npm install and npm install angular
3. Edit and angular-inview.spec.js to add your featurenpm test` to check that all is good
4. Run
5. Create a PR
If you want to become a contributor with push access open an issue asking that
or contact the author directly.