useScrollLocker.js 1.5 KB

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