wot-design-uni/components/composables/useLockScroll.ts

一个基于Vue3+TS开发的uni-app组件库，提供70+高质量组件，支持暗黑模式、国际化和自定义主题。

import { onBeforeUnmount, onDeactivated, ref, watch } from 'vue'

export function useLockScroll(shouldLock: () => boolean) {
  const scrollLockCount = ref(0)

  const lock = () => {
    if (scrollLockCount.value === 0) {
      document.getElementsByTagName('body')[0].style.overflow = 'hidden'
    }
    scrollLockCount.value++
  }

  const unlock = () => {
    if (scrollLockCount.value > 0) {
      scrollLockCount.value--
      if (scrollLockCount.value === 0) {
        document.getElementsByTagName('body')[0].style.overflow = ''
      }
    }
  }

  const destroy = () => {
    shouldLock() && unlock()
  }

  watch(shouldLock, (value) => {
    value ? lock() : unlock()
  })

  onDeactivated(destroy)
  onBeforeUnmount(destroy)

  return {
    lock,
    unlock
  }
}