From f9b7e2fd7657c6386be84ce093e0a5768f7690b5 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Tue, 22 Mar 2022 22:48:32 +0100
Subject: [PATCH] feat: use vueuse to lock scrolling

---
 src/components/modal/modal.vue | 26 +++++++-------------------
 1 file changed, 7 insertions(+), 19 deletions(-)

diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
index 460131a8..5d061735 100644
--- a/src/components/modal/modal.vue
+++ b/src/components/modal/modal.vue
@@ -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)
+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>