@ozen-ui/kit
Version:
React component library
64 lines (63 loc) • 3.02 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.FIXED_CLASSNAME = void 0;
exports.useLockBodyScroll = useLockBodyScroll;
var getScrollBarSize_1 = require("../../utils/getScrollBarSize");
var useIsomorphicEffect_1 = require("../useIsomorphicEffect");
exports.FIXED_CLASSNAME = 'ScrollLock-fixed';
var getPaddingRight = function (el) {
return parseInt(window.getComputedStyle(el).paddingRight, 10) || 0;
};
function useLockBodyScroll(active) {
if (active === void 0) { active = false; }
(0, useIsomorphicEffect_1.useIsomorphicEffect)(function () {
if (!active) {
return undefined;
}
var restoreStyle = [];
// Вычисляем все фиксированные элементы
var fixedBlocks = document.querySelectorAll(".".concat(exports.FIXED_CLASSNAME));
// Получаем ширину полосы прокрутки
var paddingOffset = (0, getScrollBarSize_1.getScrollbarSize)();
restoreStyle.push({
el: document.body,
value: document.body.style.overflow,
property: 'overflow',
});
// Блокируем полосу прокрутки
document.body.style.setProperty('overflow', 'hidden');
// Если прокрутки у body нет, то ничего не делаем
if (paddingOffset) {
// Получаем текущий отступ справа у элемента body
var originalPaddingRight = getPaddingRight(document.body);
restoreStyle.push({
el: document.body,
value: document.body.style.paddingRight,
property: 'padding-right',
});
// Назначаем body отступ равный ширине полосы прокрутки (учитываем текущий отступ body)
document.body.style.setProperty('padding-right', "".concat(originalPaddingRight + paddingOffset, "px"));
restoreStyle.push({
el: document.body,
value: '',
property: '--removed-body-scroll-bar-size',
});
document.body.style.setProperty('--removed-body-scroll-bar-size', "".concat(paddingOffset, "px"));
[].forEach.call(fixedBlocks, function (el) {
var originalPaddingRight = getPaddingRight(el);
restoreStyle.push({
el: el,
value: el.style.paddingRight,
property: 'padding-right',
});
el.style.setProperty('padding-right', "".concat(originalPaddingRight + paddingOffset, "px"));
});
}
return function () {
restoreStyle.forEach(function (_a) {
var el = _a.el, value = _a.value, property = _a.property;
el.style.setProperty(property, value || '');
});
};
}, [active]);
}