crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changed the way lock body scroll works to not scroll to top when user searches for something

Browse Source
This commit is contained in:
Piotr Janosz
2019-08-05 18:56:46 +02:00
committed by fabioberger
parent 16e55457c8
commit d39e90bfa1
1 changed files with 5 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
packages/website/ts/components/docs/search/autocomplete_overlay.tsx
View File

@@ -33,15 +33,14 @@ const Overlay = styled.div<IAutocompleteOverlayProps>`
// This could be extracted to reuse // This could be extracted to reuse
function useLockBodyScroll(): void { function useLockBodyScroll(): void {
useLayoutEffect(() => { useLayoutEffect(() => {
// Get original value of body styles const html = document.documentElement;
const { maxHeight, overflowY } = window.getComputedStyle(document.body);
// Prevent scrolling on mount // Prevent scrolling on mount
document.body.style.overflowY = 'hidden'; html.style.overflowY = 'hidden';
document.body.style.maxHeight = '100vh'; html.style.maxHeight = '100vh';
// Re-enable scrolling when component unmounts // Re-enable scrolling when component unmounts
return () => { return () => {
document.body.style.overflowY = overflowY; html.style.overflowY = 'auto';
document.body.style.maxHeight = maxHeight; html.style.maxHeight = '';
}; };
}, []); // Empty array ensures effect is only run on mount and unmount }, []); // Empty array ensures effect is only run on mount and unmount
} }