Vue Equipment
Sponsored by

useScrollLockPadding ​

A small utility to prevent fixed elements from jumping when locking scroll. Intended to be used in combination with useScrollLock.

<template>
  <div class="flex w-full flex-col items-center gap-8">
    <m-button @click="toggle">
      {{ scrollLock ? 'Unlock Scroll' : 'Lock Scroll' }}
    </m-button>
  </div>
</template>

<script lang="ts" setup>
import { shallowRef } from 'vue'
import { MButton } from '@maas/mirror/vue'
import { useScrollLock } from '@vueuse/core'
import { useScrollLockPadding } from '@maas/vue-equipment/composables/useScrollLockPadding'

const { add, remove } = useScrollLockPadding()

const scrollLock =
  typeof window !== 'undefined'
    ? useScrollLock(document?.documentElement)
    : shallowRef(false)

function toggle() {
  if (!scrollLock.value) {
    scrollLock.value = true
    add()
  } else {
    scrollLock.value = false
    remove()
  }
}
</script>

Overview ​

Anatomy ​

js
import { useScrollLockPadding } from '@maas/vue-equipment/composables/useScrollLockPadding'

const { add, remove } = useScrollLockPadding()

add()
remove()

Installation ​

CLI ​

Add @maas/vue-equipment to your dependencies.

sh
pnpm install @maas/vue-equipment
sh
npm install @maas/vue-equipment
sh
yarn add @maas/vue-equipment
sh
bun install @maas/vue-equipment

Direct import ​

Import the composable directly where you need it.

js
import {
  useCountdown,
  type DateTimeArray,
} from '@maas/vue-equipment/composables/useScrollLockPadding'