diff --git a/README.md b/README.md index 6fb31852..13413418 100644 --- a/README.md +++ b/README.md @@ -271,6 +271,20 @@ Whether text and modified key is entered at the same time. Whether character is entered. +### switchScrollingEffect + +> (close: boolean) => void + +improve shake when page scroll bar hidden + +`switchScrollingEffect` change body style, and add a class `scroolling-effect` when called, so if you page look abnormal, please check this + +```js +import switchScrollingEffect from "./src/switchScrollingEffect"; + +switchScrollingEffect(); +``` + ## License rc-util is released under the MIT license. diff --git a/src/switchScrollingEffect.js b/src/switchScrollingEffect.js index ff2301b7..ddc2c9ba 100644 --- a/src/switchScrollingEffect.js +++ b/src/switchScrollingEffect.js @@ -1,20 +1,31 @@ import getScrollBarSize from './getScrollBarSize'; -export default (close) => { - const bodyIsOverflowing = document.body.scrollHeight > - (window.innerHeight || document.documentElement.clientHeight) && +export default close => { + const bodyIsOverflowing = + document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight) && window.innerWidth > document.body.offsetWidth; if (!bodyIsOverflowing) { return; } + + // https://github.com/ant-design/ant-design/issues/19729 + const scrolllingEffectClassName = 'scroolling-effect'; + const scrolllingEffectClassNameReg = new RegExp(`(^|\\s)${scrolllingEffectClassName}($|\\s)`); + const bodyClassName = document.body.className; if (close) { document.body.style.position = ''; document.body.style.width = ''; + if (scrolllingEffectClassNameReg.test(bodyClassName)) { + document.body.className = bodyClassName.replace(scrolllingEffectClassNameReg, ''); + } return; } const scrollBarSize = getScrollBarSize(); if (scrollBarSize) { document.body.style.position = 'relative'; document.body.style.width = `calc(100% - ${scrollBarSize}px)`; + if (!scrolllingEffectClassNameReg.test(bodyClassName)) { + document.body.className = `${bodyClassName} ${scrolllingEffectClassName}`; + } } };