office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
58 lines (56 loc) • 2.37 kB
JavaScript
define(["require", "exports"], function (require, exports) {
"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