Prevent the background scrolling using useDraggable on mobile

[crealodi]

Hi everyone

Hey there - I wanted to implement a draggable window component. On desktop all works perfectly. But when I open the site on a mobile device (or even in the dev tools in Firefox) it doesn't really work because it seems to scroll the background too. Any suggestions?

This is the component I'm using it in (it's a window app with slotted content with the Idea of being a universal, reusable component in a mockup of a computer-screen)

<script setup>
import { useDraggable} from '@vueuse/core'
import { ref } from 'vue'

const el = ref(null)
const handle = ref(null)

const { x, y, style} = useDraggable(el, {
  initialValue: { x: 40, y: 40 },
  handle,
  preventDefault: true,
})


</script>

<template>
  <div ref="el" :style="style" class="fenster-wrapper">
    <header ref="handle">
      <p class="titel"><slot name="header"></slot></p>
      <button @click="$emit('close')" class="close">X</button>
    </header>
    <main>
      <slot></slot>
    </main>

    
  </div>
</template>

<style scoped>
.fenster-wrapper {
  position: fixed;
  background-color: darkolivegreen;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.fenster-wrapper header {
  display: flex;
  justify-content: space-between;
  height: 40px;
  border-bottom: 2px solid white;
}


</style>

I'm quite new to vuejs and vueuse so forgive me, if this behavior is caused by my noob-ism.

Thanks in advance!