ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Always show vertical scrollbar on "body" instead of "html" element

Browse Source 
Due to setting the html elements "y overflow" to "auto" after a manga grid got unmounted (d21521625b), MUIs "scroll lock" of "modals" was broken in the reader.

For some reason the scrollbar does not get locked and instead, due to the added padding, the pages jumped slightly upward.

MUI uses the "body" element to lock the scrollbar, and thus, using this element as well instead of "html" fixes this problem, since the manually set "overflow" value gets overwritten by MUI and thus, won't mess with its logic.
This commit is contained in:
schroda
2024-05-22 23:06:17 +02:00
parent e9ee43b9b4
commit 871908eba9
1 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/MangaGrid.tsx
View File

@@ -273,12 +273,12 @@ export const MangaGrid: React.FC<IMangaGridProps> = ({
let timeout: NodeJS.Timeout; let timeout: NodeJS.Timeout;
const changeStyle = (timeoutMS: number) => { const changeStyle = (timeoutMS: number) => {
timeout = setTimeout(() => { timeout = setTimeout(() => {
if (document.documentElement.style.overflow.includes('hidden')) { if (document.body.style.overflow.includes('hidden')) {
changeStyle(250); changeStyle(250);
return; return;
} }
document.documentElement.style.overflowY = gridLayout === GridLayout.List ? 'auto' : 'scroll'; document.body.style.overflowY = gridLayout === GridLayout.List ? 'auto' : 'scroll';
}, timeoutMS); }, timeoutMS);
}; };
@@ -290,7 +290,7 @@ export const MangaGrid: React.FC<IMangaGridProps> = ({
}, [gridLayout]); }, [gridLayout]);
useEffect( useEffect(
() => () => { () => () => {
document.documentElement.style.overflowY = 'auto'; document.body.style.overflowY = 'auto';
}, },
[], [],
); );