ivue-material-plus

Version:
A high quality UI components Library with Vue.js
76 lines (73 loc) • 1.98 kB
JavaScript
import { ref } from 'vue';
import { isClient, getScrollBarSize } from '../../utils/helpers.mjs';

const scrollbarMixins = ({ lockScroll = true }) => {
  const bodyIsOverflowing = ref(false);
  const scrollBarWidth = ref(0);
  const checkScrollBar = () => {
    if (!isClient) {
      return;
    }
    let fullWindowWidth = window.innerWidth;
    if (!fullWindowWidth) {
      const documentElementRect = document.documentElement.getBoundingClientRect();
      fullWindowWidth = documentElementRect.right - Math.abs(documentElementRect.left);
    }
    bodyIsOverflowing.value = document.body.clientWidth < fullWindowWidth;
    if (bodyIsOverflowing.value) {
      scrollBarWidth.value = getScrollBarSize();
    }
  };
  const checkMaskInVisible = () => {
    if (!isClient) {
      return;
    }
    const masks = document.getElementsByClassName("ivue-modal-mask") || [];
    return Array.from(masks).every(
      (m) => m.style.display === "none" || m.classList.contains("fade-leave-to")
    );
  };
  const resetScrollBar = () => {
    if (!isClient) {
      return;
    }
    document.body.style.paddingRight = "";
  };
  const setScrollBar = () => {
    if (!isClient) {
      return;
    }
    if (bodyIsOverflowing.value && scrollBarWidth.value !== void 0) {
      document.body.style.paddingRight = `${scrollBarWidth.value}px`;
    }
  };
  const addScrollEffect = () => {
    if (!isClient) {
      return;
    }
    if (!lockScroll) {
      return;
    }
    checkScrollBar();
    setScrollBar();
    document.body.style.overflow = "hidden";
  };
  const removeScrollEffect = () => {
    if (!lockScroll) {
      return;
    }
    if (isClient && checkMaskInVisible()) {
      document.body.style.overflow = "";
      resetScrollBar();
    }
  };
  return {
    checkScrollBar,
    checkMaskInVisible,
    resetScrollBar,
    setScrollBar,
    addScrollEffect,
    removeScrollEffect
  };
};

export { scrollbarMixins };
//# sourceMappingURL=mixins-scrollbar.mjs.map