@react-md/utils
Version:
General utils for react-md.
59 lines • 2.26 kB
JavaScript
var cached = {
height: undefined,
width: undefined,
};
/**
* This is used to reset the cached value for each test and verify the cached
* behavior is working
* @internal
*/
export var reset = function () {
cached.height = undefined;
cached.width = undefined;
};
/**
* This will return the scrollbar size for a specific OS by creating a
* temporary element to compare the height/width between it's inner element and
* it's own height/width when scrollbars are enabled. This is useful when your
* height/width calculations need to exclude scrollbars since they are included
* by default but content can't be shown underneath them for for static
* elements.
*
* Note: This will return `0` on Mac OS with the default "Only show scrollbars
* when scrolling" which is to be expected. These scrollbars overlay the content
* and actually don't take up height/width real estate.
*
* @see https://stackoverflow.com/a/13382873
* @param type - Either the string "height" or "width" to determine which size
* to get
* @param forced - Boolean if the scrollbar height/width should be force
* updated. When this is false, the "cached" value will be returned immediately
* instead
* @returns the current scrollbar width or -1 if running this on the server
*/
export function scrollbarSize(type, forced) {
if (type === void 0) { type = "width"; }
if (forced === void 0) { forced = false; }
/* istanbul ignore if */
if (typeof window === "undefined") {
return -1;
}
var value = cached[type];
if (!forced && typeof value === "number") {
return value;
}
var outer = document.createElement("div");
outer.style.visibility = "hidden";
outer.style.overflow = "scroll";
document.body.appendChild(outer);
var inner = document.createElement("div");
outer.appendChild(inner);
var offsetType = type === "width" ? "offsetWidth" : "offsetHeight";
// the scrollbar width can be determined by comparing the width of the parent
// element that has scrollbars to the child element that does not.
value = outer[offsetType] - inner[offsetType];
cached[type] = value;
document.body.removeChild(outer);
return value;
}
//# sourceMappingURL=scrollbarSize.js.map