ant-design-vue/components/_util/switchScrollingEffect.ts
tangjinzhou 98755f332c
refactor: modal (#5129), close #5096
* fix: can not scroll when close dialog #5096

* refactor: modal
2022-01-06 16:08:53 +08:00

43 lines
1.2 KiB
TypeScript

import getScrollBarSize from './getScrollBarSize';
import setStyle from './setStyle';
function isBodyOverflowing() {
return (
document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight) &&
window.innerWidth > document.body.offsetWidth
);
}
let cacheStyle = {};
export default (close?: boolean) => {
if (!isBodyOverflowing() && !close) {
return;
}
// https://github.com/ant-design/ant-design/issues/19729
const scrollingEffectClassName = 'ant-scrolling-effect';
const scrollingEffectClassNameReg = new RegExp(`${scrollingEffectClassName}`, 'g');
const bodyClassName = document.body.className;
if (close) {
if (!scrollingEffectClassNameReg.test(bodyClassName)) return;
setStyle(cacheStyle);
cacheStyle = {};
document.body.className = bodyClassName.replace(scrollingEffectClassNameReg, '').trim();
return;
}
const scrollBarSize = getScrollBarSize();
if (scrollBarSize) {
cacheStyle = setStyle({
position: 'relative',
width: `calc(100% - ${scrollBarSize}px)`,
});
if (!scrollingEffectClassNameReg.test(bodyClassName)) {
const addClassName = `${bodyClassName} ${scrollingEffectClassName}`;
document.body.className = addClassName.trim();
}
}
};