Viewport details
Get viewport details
Install
You can install via npm or yarn
npm
npm install --save viewport-details
yarn
yarn add viewport-details
Usage
Importing
You can import using ES6 imports
import { getViewportDetails } from 'viewport-details';
Getting details
console.log(getViewportDetails());
Will return:
interface ViewportDetails {
/**
* The width of the viewport
*/
width: number;
/**
* The height of the viewport
*/
height: number;
/**
* The hight of the viewport if the browser controlls have collapsed (e.g. in iOS Safari)
*/
heightCollapsedControls: number;
/**
* The scroll x position of the viewport
*/
scrollX: number;
/**
* The scroll y position of the viewport
*/
scrollY: number;
/**
* Whether the viewport has resized since the last time getViewportDetails was called
*/
resized: boolean;
/**
* Whether the viewport scrolled since the last time getViewportDetails was called
*/
scrolled: boolean;
/**
* The direction in which the user is scrolling on the x axis. (This will not update until getViewportDetails has been called once)
*/
scrollDirectionX: ScrollDirectionX;
/**
* The direction in which the user is scrolling on the y axis. (This will not update until getViewportDetails has been called once)
*/
scrollDirectionY: ScrollDirectionY;
/**
* The previous getViewportDetails result
*/
previous?: ViewportDetails;
/**
* Whether any of the values have changes since the last time getViewport details was called
*/
changed?: boolean;
}
Note
heightCollapsedControls
is the height that the viewport will be once the user has scrolled and the browser controlls shrink, such as on iOS Safari.
resized
represents whether the viewport resized since the previous animation frame.
scrolled
represents whether the viewport scrolled since the previous animation frame.
scrollDirectionX
represents a the direction of scroll. 0 means no movement, 1 means scrolling to the right, and -1 means scrolling to the left.
If you're using TypeScript an enum (ScrollDirectionX
) is also available, with the options None, Right, and Left.
scrollDirectionY
represents a the direction of scroll. 0 means no movement, 1 means scrolling down, and -1 means scrolling up.
If you're using TypeScript an enum (ScrollDirectionY
) is also available, with the options None, Up, and Down.