UNPKG

office-ui-fabric-react

Version:

Reusable React components for building experiences for Office 365.

56 lines (54 loc) 2.09 kB
"use strict"; var _scrollbarWidth; exports.DATA_IS_SCROLLABLE_ATTRIBUTE = 'data-is-scrollable'; /** Calculates the width of a scrollbar for the browser/os. */ function getScrollbarWidth() { if (_scrollbarWidth === undefined) { var scrollDiv = document.createElement('div'); scrollDiv.style.setProperty('width', '100px'); scrollDiv.style.setProperty('height', '100px'); scrollDiv.style.setProperty('overflow', 'scroll'); scrollDiv.style.setProperty('position', 'absolute'); scrollDiv.style.setProperty('top', '-9999px'); document.body.appendChild(scrollDiv); // Get the scrollbar width _scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth; // Delete the DIV document.body.removeChild(scrollDiv); } return _scrollbarWidth; } exports.getScrollbarWidth = getScrollbarWidth; /** * Traverses up the DOM for the element with the data-is-scrollable=true attribute, or returns * document.body. */ function findScrollableParent(startingElement) { var el = startingElement; // First do a quick scan for the scrollable attribute. while (el && el !== document.body) { if (el.getAttribute(exports.DATA_IS_SCROLLABLE_ATTRIBUTE) === 'true') { return el; } el = el.parentElement; } // If we haven't found it, the use the slower method: compute styles to evaluate if overflow is set. el = startingElement; while (el && el !== document.body) { if (el.getAttribute(exports.DATA_IS_SCROLLABLE_ATTRIBUTE) !== 'false') { var styles = getComputedStyle(el); var overflowY = styles ? styles.getPropertyValue('overflow-y') : ''; if (overflowY && (overflowY === 'scroll' || overflowY === 'auto')) { return el; } } el = el.parentElement; } // Fall back to window scroll. if (!el || el === document.body) { el = window; } return el; } exports.findScrollableParent = findScrollableParent; //# sourceMappingURL=scroll.js.map