diff --git a/lib/ViewportProvider.tsx b/lib/ViewportProvider.tsx index 06fe52c..d34ab74 100644 --- a/lib/ViewportProvider.tsx +++ b/lib/ViewportProvider.tsx @@ -50,9 +50,24 @@ const getNodeScroll = (elem = window) => { }; const getClientDimensions = () => { + const { innerWidth, innerHeight, outerWidth, outerHeight } = window; + const { + clientWidth, + clientHeight, + scrollHeight, + scrollWidth, + offsetHeight, + offsetWidth, + } = document.documentElement; return { - width: window.innerWidth || document.documentElement.clientWidth, - height: window.innerHeight || document.documentElement.clientHeight, + width: innerWidth, + height: innerHeight, + clientWidth, + clientHeight, + outerWidth, + outerHeight, + documentWidth: Math.max(scrollWidth, offsetWidth, clientWidth), + documentHeight: Math.max(scrollHeight, offsetHeight, clientHeight), }; }; @@ -115,6 +130,12 @@ export const createInitDimensionsState = () => { return { width: 0, height: 0, + clientWidth: 0, + clientHeight: 0, + outerWidth: 0, + outerHeight: 0, + documentWidth: 0, + documentHeight: 0, }; } return getClientDimensions(); @@ -198,9 +219,7 @@ export default class ViewportProvider extends React.PureComponent { ); handleResize = debounce(() => { - const { width, height } = getClientDimensions(); - this.dimensionsState.width = width; - this.dimensionsState.height = height; + Object.assign(this.dimensionsState, getClientDimensions()); this.componentMightHaveUpdated = true; }, 80); diff --git a/lib/types.ts b/lib/types.ts index f9d6447..8ee930e 100644 --- a/lib/types.ts +++ b/lib/types.ts @@ -8,6 +8,12 @@ import { export interface IDimensions { width: number; height: number; + clientWidth: number; + clientHeight: number; + outerWidth: number; + outerHeight: number; + documentWidth: number; + documentHeight: number; } export interface IScroll {