vuux/dist/es/ScrollBar/src/hook/useScrollBar.mjs

Vue3 Nuxt3 Nuxt4 组件库

import { computed as f, onMounted as g, nextTick as x, onUpdated as z, onBeforeUnmount as U } from "vue";
import { Utils as A } from "@vuux/utils";
const S = (l, e, t, a) => {
  const r = f(() => ({
    height: l.height ? l.height : "",
    maxHeight: l.maxHeight ? l.maxHeight : ""
  }));
  let n = 0, u = 0, i = null;
  const s = () => {
    n || (n = requestAnimationFrame(() => {
      if (!e.value) {
        n = 0;
        return;
      }
      t.value && t.value.handleScroll(e.value), a("scroll", {
        top: e.value.scrollTop,
        left: e.value.scrollLeft
      }), n = 0;
    }));
  }, o = () => {
    u || (u = requestAnimationFrame(() => {
      t.value && t.value.update(), u = 0;
    }));
  }, c = () => {
    e.value && s();
  }, v = () => {
    o();
  }, m = A.debounce(() => {
    o();
  }, 100), d = () => {
    e.value && (i = new ResizeObserver(() => {
      m();
    }), i.observe(e.value));
  }, h = () => {
    i && (i.disconnect(), i = null);
  };
  return g(() => {
    d(), x(() => {
      t.value && t.value.update();
    });
  }), z(() => {
    o();
  }), U(() => {
    h(), n && cancelAnimationFrame(n), u && cancelAnimationFrame(u);
  }), {
    update: v,
    scroll: c,
    wrapStyle: r
  };
};
export {
  S as useScrollBar
};