Origami Frontend Components & Services

Readme: o-element-visibility

o-element-visibility has a support status of "dead". This means that there are no plans to fix any issues with this component, and it may stop working at any point. More information on the status of this component is available in the README. If you still rely on this component or have concerns, please contact the Origami team.

Utility for tracking element visibility within the viewport.

o-element-visibility is deprecated. Instead use Intersection Observer with a polyfill to support browsers without Intersection Observer.



Tracks the selected elements and reports the percentage of the element currently on the screen, changes to the percentage in view will fire events within the oVisibility namespace (see Events below).

If the selector argument is omitted [data-o-element-visibility-track] is used.

Note: Enabling element tracking will also attach all o-viewport events.


Stop tracking all currently tracked elements.

Note: This will not stop listening to all the oViewport events.


Pass an element to be tracked, returns a TrackedElement (see below).


The position of an element is cached when we begin tracking, this will recache those values for every element currently being tracked.

Force will force an event to fire even if no change is detected.

Note: During scrolling this method is not run but is run on resize or orientation change


Updates the current visibility status of all elements and fires events if change are detected.

Force will force an event to fire even if no change is detected.



An array of the currently tracked elements


An instance of TrackedElement is returned by the track method. The instance contains information about the position of the element in the page and methods to calculate it's visibility:

inview: Boolean // the elements current visibility within the viewport
percentage: Number // the percentage of the element in view
rect: Object // the result of the last getBoundingClientRect run on this element
width: Number // the width of the element
height: Number // the height of the element
top: Number // the absolute top of the element
left: Number // the absolute left of the element
bottom: Number // the absolute bottom of the element
right: Number // the absolute right of the element
area: Number // the area of the element


returns this

Same as above but for this TrackedElement only.
Force will force an event to fire even if no change is detected.


returns this

Same as above but for this TrackedElement only.
Force will force an event to fire even if no change is detected.


returns this

Test if the element is currently in the viewport


returns this

Calculate the percentage of the element in the viewport


Each of these custom events are fired on document.body. For each custom event event.detail.originalEvent contains a reference to the original browser event.

Additional properties in event.detail are detailed below:


element: HTMLElement // or Node in < ie10
inviewport: Boolean // if the element is in the viewport
type: ['visibility', 'percentage', 'update'] // the reason the event fired, either because of visibility or percentage change, update means the function was run with force
percentInView: Number //  the percentage of the element that is visible

Note: inviewport can be true while percentage is 0, this means the element has a width or height of 0 but is within the viewport

dead Origami v1 (Bower)
Switch component view

GitHub: o-element-visibility

Install o-element-visibility

If using the Build Service, add o-element-visibility@^2.3.3 to your script tag.

If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/o-element-visibility@^2.3.3".

Help & Support

o-element-visibility is maintained directly by the Origami team. If you have any questions about o-element-visibility or Origami in general, we are happy to help. 😊

Slack: #ft-origami
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #ft-origami
Email: origami.support@ft.com