@atlaskit/modal-dialog
Version:
A modal dialog displays content that requires user interaction, in a layer above the page.
52 lines (50 loc) • 1.93 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = usePreventProgrammaticScroll;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = require("react");
var _bindEventListener = require("bind-event-listener");
/**
* Returns how far the body is scrolled from the top of the viewport.
*
* ____
* ||____|| <-- overflow
* | | <-- viewport
* |____|
*
* Scroll distance is the height of overflow outside the viewport.
*/
function getScrollDistance() {
var _document$documentEle, _document$body;
return window.pageYOffset || ((_document$documentEle = document.documentElement) === null || _document$documentEle === void 0 ? void 0 : _document$documentEle.scrollTop) || ((_document$body = document.body) === null || _document$body === void 0 ? void 0 : _document$body.scrollTop) || 0;
}
/**
* Prevents programatic scrolling of the viewport with `scrollIntoView`.
* Should be used in conjunction with a scroll lock to prevent a user from scrolling.
*
* @returns scroll top offset of the viewport
*/
function usePreventProgrammaticScroll() {
var _useState = (0, _react.useState)(0),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
scrollTopOffset = _useState2[0],
setScrollTopOffset = _useState2[1];
(0, _react.useLayoutEffect)(function () {
setScrollTopOffset(getScrollDistance());
}, []);
var onWindowScroll = (0, _react.useCallback)(function () {
if (getScrollDistance() !== scrollTopOffset) {
window.scrollTo(window.pageXOffset, scrollTopOffset);
}
}, [scrollTopOffset]);
(0, _react.useEffect)(function () {
return (0, _bindEventListener.bind)(window, {
type: 'scroll',
listener: onWindowScroll
});
}, [onWindowScroll]);
return scrollTopOffset;
}