diff options
author | Eugen Rochko <eugen@zeonfederated.com> | 2019-07-19 09:25:22 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2019-07-19 09:25:22 +0200 |
commit | aa22b38fdbc1842549b6cbc0e0d948f85a71b92a (patch) | |
tree | ab38f411a1c5726820dfade57fef2d6d2cb670c2 /app/javascript/mastodon/features/ui/components/modal_root.js | |
parent | 4fa6472523d47e56f2458950af8d7ad9b5817a82 (diff) |
Change single-column mode to scroll the whole page (#11359)
Fix #10840
Diffstat (limited to 'app/javascript/mastodon/features/ui/components/modal_root.js')
-rw-r--r-- | app/javascript/mastodon/features/ui/components/modal_root.js | 24 |
1 files changed, 24 insertions, 0 deletions
diff --git a/app/javascript/mastodon/features/ui/components/modal_root.js b/app/javascript/mastodon/features/ui/components/modal_root.js index cc2ab6c8c..06f9e1bc4 100644 --- a/app/javascript/mastodon/features/ui/components/modal_root.js +++ b/app/javascript/mastodon/features/ui/components/modal_root.js @@ -32,6 +32,28 @@ const MODAL_COMPONENTS = { 'LIST_ADDER':ListAdder, }; +let cachedScrollbarWidth = null; + +export const getScrollbarWidth = () => { + if (cachedScrollbarWidth !== null) { + return cachedScrollbarWidth; + } + + const outer = document.createElement('div'); + outer.style.visibility = 'hidden'; + outer.style.overflow = 'scroll'; + document.body.appendChild(outer); + + const inner = document.createElement('div'); + outer.appendChild(inner); + + const scrollbarWidth = outer.offsetWidth - inner.offsetWidth; + cachedScrollbarWidth = scrollbarWidth; + outer.parentNode.removeChild(outer); + + return scrollbarWidth; +}; + export default class ModalRoot extends React.PureComponent { static propTypes = { @@ -47,8 +69,10 @@ export default class ModalRoot extends React.PureComponent { componentDidUpdate (prevProps, prevState, { visible }) { if (visible) { document.body.classList.add('with-modals--active'); + document.documentElement.style.marginRight = `${getScrollbarWidth()}px`; } else { document.body.classList.remove('with-modals--active'); + document.documentElement.style.marginRight = 0; } } |