useLockScroll.ts 774 B

12345678910111213141516171819202122232425262728293031323334353637
  1. import { onBeforeUnmount, onDeactivated, ref, watch } from 'vue'
  2. export function useLockScroll(shouldLock: () => boolean) {
  3. const scrollLockCount = ref(0)
  4. const lock = () => {
  5. if (scrollLockCount.value === 0) {
  6. document.getElementsByTagName('body')[0].style.overflow = 'hidden'
  7. }
  8. scrollLockCount.value++
  9. }
  10. const unlock = () => {
  11. if (scrollLockCount.value > 0) {
  12. scrollLockCount.value--
  13. if (scrollLockCount.value === 0) {
  14. document.getElementsByTagName('body')[0].style.overflow = ''
  15. }
  16. }
  17. }
  18. const destroy = () => {
  19. shouldLock() && unlock()
  20. }
  21. watch(shouldLock, (value) => {
  22. value ? lock() : unlock()
  23. })
  24. onDeactivated(destroy)
  25. onBeforeUnmount(destroy)
  26. return {
  27. lock,
  28. unlock
  29. }
  30. }