feat: prevent scrolling the rest of the page when a modal is open #1617
No reviewers
Labels
No Label
area/internal-code
changes requested
confirmed
dependencies
duplicate
good first issue
help wanted
hosting
invalid
kind/bug
kind/feature
question
wontfix
No Milestone
No project
No Assignees
4 Participants
Due Date
No due date set.
Dependencies
No dependencies set.
Reference: vikunja/frontend#1617
Loading…
Reference in New Issue
No description provided.
Delete Branch "feature/stop-body-scrolling-when-modal-is-open"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Based on this article: https://css-tricks.com/prevent-page-scrolling-when-a-modal-is-open/
Not sure if there's a more "vue-y" way to do this but it works pretty good. (I don't think there's a vue-way to do this because we need to manipulate the body tag which is outside the scope of the vue app?)
ab71f12bfa
to8dbb9c2fde
Hi konrad!
Thank you for creating a PR!
I've deployed the changes of this PR on a preview environment under this URL: https://1617-feature-stop-body-scrolling-when--vikunja-frontend-preview.netlify.app
You can use this url to view the changes live and test them out.
You will need to manually connect this to an api running somehwere. The easiest to use is https://try.vikunja.io/.
Have a nice day!
It may be nice to put this into a composable, to easily use the "scroll lock" functions in other components when needed
Like this one: https://vueuse.org/core/usescrolllock/
Vueuse never ceases to amaze me. Will change it!
8dbb9c2fde
tof92aeed540
Now using vueuse's function for this.
@ -86,0 +80,4 @@
defineEmits(['close', 'submit'])
const modal = ref<HTMLElement | null>(null)
Why not:
Don't I need to specify the default value?
The default would be
undefined
in that case. Meaning:ref<HTMLElement>()
is identical toref<HTMLElement | undefined>(undefined)
Ohh okay, that makes sense. I'm kind of used to setting everything to
null
if its not defined, coming from the backend. Butundefined
makes more sense in the js world.