Origami Frontend Components & Services

Readme: o-viewport

Utility for attaching debounced listeners to resize, scroll, orientation and visibility events on window.

Note: within the module's API and in the documentation below orientation and visibility are used instead of orientationchange or visibilitychange, but the actual browser event listened to is orientationchange or visibilitychange



Attaches a debounced/throttled (as appropriate) listener to events on window [resize, scroll, orientation, visibility or all] which in turn fires events within the oViewport namespace (see Events below).

Note: all will enable all o-viewport events.


Remove the attached listener from the window for the named event [resize, scroll, orientation, visibility or all].

Note: all will disable all o-viewport events.


Provides a reasonably reliable way (more so than window.orientation) of obtaining the current orientation of the viewport.


Provides a reasonably reliable way of obtaining the current visibility of the viewport.


Provides a reliable way of obtaining the current dimensions of the browser window. Returns an object with the properties width and height.

By default or if no parameters are passed the method will return the size of the viewport inclusive of the scrollbars. However in certain cases (e.g. adverts) you may want to get the size of the viewport without the scroll bars. In such case pass true to the method in order to ignore the scrollbars.


Provides a reliable way of obtaining the current scroll position of the viewport. returns an object with the properties width, height, left and top

o-viewport#setThrottleInterval(eventType, interval) Product use only

Sets the debounce/throttle interval for a given event [scroll, resize or orientation].
As a shorthand, calling setThrottleInterval with 1 - 3 numbers will set the intervals for scroll, resize and orientation in that order e.g. setThrottleInterval(100, undefined, 300) is equivalent to:

setThrottleInterval('scroll', 100)
setThrottleInterval('resize') // which does nothing
setThrottleInterval('orientation', 300)
setThrottleInterval('visibility', 30)

The default value for each of these is 100ms


Turns on debug mode (logging event details to the console).


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 and event.detail.viewport the result of o-viewport#getSize(). Additional properties in event.detail are detailed below:


No additional properties


orientation: 'portrait' or 'landscape'


hidden: true or false


scrollLeft: body.scrollLeft // or documentElement.scrollLeft in < ie10
scrollTop: body.scrollTop //  or documentElement.scrollTop in < ie10
scrollHeight: body.scrollHeight
scrollWidth: body.scrollWidth



Copyright (c) 2016 Financial Times Ltd. All rights reserved.

This software is published under the MIT licence.

active Origami v1 (Bower)
Switch component view

GitHub: o-viewport

Install o-viewport

If using the Build Service, add o-viewport@^3.3.3 to your script tag.

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

Help & Support

o-viewport is maintained directly by the Origami team. If you have any questions about o-viewport 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