discours.io/webapp
5
0
Fork 0
Code Issues Pull Requests Actions Projects Wiki Activity

Fixed document scroll position when modal opened

Browse Source
This commit is contained in:
kvakazyambra 2022-11-04 16:05:50 +03:00
parent 03024ca58d
commit d0c0f3ab93
2 changed files with 15 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/Nav/Header.tsx
View File

@ -49,9 +49,24 @@ export const Header = (props: Props) => {
const toggleWarnings = () => setVisibleWarnings(!visibleWarnings()) const toggleWarnings = () => setVisibleWarnings(!visibleWarnings())
const toggleFixed = () => setFixed((oldFixed) => !oldFixed) const toggleFixed = () => setFixed((oldFixed) => !oldFixed)
// effects // effects
let windowScrollTop = 0
createEffect(() => { createEffect(() => {
const mainContent = document.querySelector('.main-content')
if (fixed() || modal() !== null) {
windowScrollTop = window.scrollY
mainContent.style.marginTop = `-${windowScrollTop}px`
}
document.body.classList.toggle('fixed', fixed() || modal() !== null) document.body.classList.toggle('fixed', fixed() || modal() !== null)
document.body.classList.toggle(styles.fixed, fixed() && !modal()) document.body.classList.toggle(styles.fixed, fixed() && !modal())
if (!fixed() && !modal()) {
mainContent.style.marginTop = ''
window.scrollTo(0, windowScrollTop)
}
}) })
// derived // derived

1
src/styles/app.scss
View File

@ -565,7 +565,6 @@ astro-island {
min-height: 300px; min-height: 300px;
padding-top: 100px; padding-top: 100px;
position: relative; position: relative;
transition: all 1s ease;
} }
.main-content--no-padding { .main-content--no-padding {