3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-07-17 08:37:57 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor(v2): disable scroll when sidebar menu is open (#2189)

Browse source
This commit is contained in:
Alexey Pyltsyn 2020-01-08 18:06:07 +03:00 • committed by Yangshun Tay
parent 26fa885ef6
commit 7e750de6fa
3 changed files with 26 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

3
packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js
View file

@ -9,6 +9,7 @@ import React, {useState, useCallback} from 'react';
import classnames from 'classnames'; import classnames from 'classnames';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import useBaseUrl from '@docusaurus/useBaseUrl'; import useBaseUrl from '@docusaurus/useBaseUrl';
import useLockBodyScroll from '@theme/hooks/useLockBodyScroll';
import Link from '@docusaurus/Link'; import Link from '@docusaurus/Link';
import isInternalUrl from '@docusaurus/utils'; // eslint-disable-line import/no-extraneous-dependencies import isInternalUrl from '@docusaurus/utils'; // eslint-disable-line import/no-extraneous-dependencies
@ -125,6 +126,8 @@ function DocSidebar(props) {
sidebarCollapsible, sidebarCollapsible,
} = props; } = props;
useLockBodyScroll(showResponsiveSidebar);
if (!currentSidebar) { if (!currentSidebar) {
return null; return null;
} }

5
packages/docusaurus-theme-classic/src/theme/Navbar/index.js
View file

@ -17,6 +17,7 @@ import classnames from 'classnames';
import useThemeContext from '@theme/hooks/useThemeContext'; import useThemeContext from '@theme/hooks/useThemeContext';
import useHideableNavbar from '@theme/hooks/useHideableNavbar'; import useHideableNavbar from '@theme/hooks/useHideableNavbar';
import useLockBodyScroll from '@theme/hooks/useLockBodyScroll';
import styles from './styles.module.css'; import styles from './styles.module.css';
@ -54,12 +55,12 @@ function Navbar() {
const {theme, setTheme} = useThemeContext(); const {theme, setTheme} = useThemeContext();
const {navbarRef, isNavbarVisible} = useHideableNavbar(hideOnScroll); const {navbarRef, isNavbarVisible} = useHideableNavbar(hideOnScroll);
useLockBodyScroll(sidebarShown);
const showSidebar = useCallback(() => { const showSidebar = useCallback(() => {
document.body.style.overflow = 'hidden';
setSidebarShown(true); setSidebarShown(true);
}, [setSidebarShown]); }, [setSidebarShown]);
const hideSidebar = useCallback(() => { const hideSidebar = useCallback(() => {
document.body.style.overflow = 'visible';
setSidebarShown(false); setSidebarShown(false);
}, [setSidebarShown]); }, [setSidebarShown]);

20
packages/docusaurus-theme-classic/src/theme/hooks/useLockBodyScroll.js Normal file
View file

@ -0,0 +1,20 @@
/**
* Copyright (c) 2017-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import {useEffect} from 'react';
function useLockBodyScroll(lock = true) {
useEffect(() => {
document.body.style.overflow = lock ? 'hidden' : 'visible';
return () => {
document.body.style.overflow = 'visible';
};
}, [lock]);
}
export default useLockBodyScroll;