vikunja
/
frontend
Archived
6
39
Fork 49
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

feat: prevent scrolling the rest of the page when a modal is open #1617

Merged
konrad merged 2 commits from feature/stop-body-scrolling-when-modal-is-open into main 2022-03-27 20:42:21 +00:00
Conversation 5 Commits 2 Files Changed 1 +7 -19
1 changed files with 7 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit f92aeed540 - Show all commits

26
src/components/modal/modal.vue
View File

@ -8,6 +8,7 @@
{ 'has-overflow': overflow },
variant,
]"
ref="modal"
>
<div
class="modal-container"
@ -62,7 +63,8 @@
<script lang="ts" setup>
import BaseButton from '@/components/base/BaseButton.vue'
import {onUnmounted, watch} from 'vue'
import {ref, watch} from 'vue'
import {useScrollLock} from '@vueuse/core'
const props = withDefaults(defineProps<{
enabled?: boolean,
@ -76,34 +78,20 @@ const props = withDefaults(defineProps<{
variant: 'default',
})
defineEmits(['close', 'submit'])
defineEmits(['close', 'submit'])
// Based on https://css-tricks.com/prevent-page-scrolling-when-a-modal-is-open/
function resetScrolling() {
const body = document.body
const scrollY = body.style.top
body.style.position = ''
body.style.top = ''
window.scrollTo(0, parseInt(scrollY || '0') * -1)
}
const modal = ref<HTMLElement | null>(null)
dpschen commented 2022-04-09 22:12:00 +00:00
Review
Copy Link

Why not:

const modal = ref<HTMLElement>()
Why not: ```js const modal = ref<HTMLElement>() ```
konrad commented 2022-04-09 23:08:16 +00:00
Review
Copy Link

Don't I need to specify the default value?

Don't I need to specify the default value?
dpschen commented 2022-04-09 23:48:28 +00:00
Review
Copy Link

The default would be undefined in that case. Meaning:

ref<HTMLElement>() is identical to ref<HTMLElement | undefined>(undefined)

The default would be `undefined` in that case. Meaning: `ref<HTMLElement>()` is identical to `ref<HTMLElement | undefined>(undefined)`
konrad commented 2022-04-10 18:54:24 +00:00
Review
Copy Link

Ohh okay, that makes sense. I'm kind of used to setting everything to null if its not defined, coming from the backend. But undefined makes more sense in the js world.

Ohh okay, that makes sense. I'm kind of used to setting everything to `null` if its not defined, coming from the backend. But `undefined` makes more sense in the js world.
👍 1
const scrollLock = useScrollLock(modal)
watch(
() => props.enabled,
enabled => {
if (enabled) {
const scrollY = window.scrollY
document.body.style.position = 'fixed'
document.body.style.top = `-${scrollY}px`
} else {
resetScrolling()
}
scrollLock.value = enabled
},
{
immediate: true,
},
)
onUnmounted(resetScrolling)
</script>
<style lang="scss" scoped>