useScrollLocker.js 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738
  1. import { computed, watchEffect } from 'vue';
  2. import { updateCSS, removeCSS } from '../../vc-util/Dom/dynamicCSS';
  3. import getScrollBarSize from '../../_util/getScrollBarSize';
  4. import canUseDom from '../../_util/canUseDom';
  5. const UNIQUE_ID = `vc-util-locker-${Date.now()}`;
  6. let uuid = 0;
  7. /**../vc-util/Dom/dynam
  8. * Test usage export. Do not use in your production
  9. */
  10. export function isBodyOverflowing() {
  11. return document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight) && window.innerWidth > document.body.offsetWidth;
  12. }
  13. export default function useScrollLocker(lock) {
  14. const mergedLock = computed(() => !!lock && !!lock.value);
  15. uuid += 1;
  16. const id = `${UNIQUE_ID}_${uuid}`;
  17. watchEffect(onClear => {
  18. if (!canUseDom()) {
  19. return;
  20. }
  21. if (mergedLock.value) {
  22. const scrollbarSize = getScrollBarSize();
  23. const isOverflow = isBodyOverflowing();
  24. updateCSS(`
  25. html body {
  26. overflow-y: hidden;
  27. ${isOverflow ? `width: calc(100% - ${scrollbarSize}px);` : ''}
  28. }`, id);
  29. } else {
  30. removeCSS(id);
  31. }
  32. onClear(() => {
  33. removeCSS(id);
  34. });
  35. }, {
  36. flush: 'post'
  37. });
  38. }