@talex-touch/tuffex 0.3.3

package/dist/es/scroll/src/TxScroll.vue2.js

@@ -0,0 +1,646 @@
+import { defineComponent, ref, computed, onMounted, nextTick, onUnmounted, watch, createElementBlock, openBlock, normalizeClass, normalizeStyle, renderSlot, createElementVNode } from 'vue';
+import PullDown from '@better-scroll/pull-down';
+import PullUp from '@better-scroll/pull-up';
+
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "TxScroll"
+  },
+  __name: "TxScroll",
+  props: {
+    noPadding: { type: Boolean, default: false },
+    native: { type: Boolean, default: false },
+    scrollChaining: { type: Boolean, default: false },
+    direction: { default: "vertical" },
+    scrollbar: { type: Boolean, default: true },
+    scrollbarFade: { type: Boolean, default: true },
+    scrollbarInteractive: { type: Boolean, default: true },
+    scrollbarAlwaysVisible: { type: Boolean, default: false },
+    scrollbarMinSize: { default: 18 },
+    probeType: { default: 3 },
+    bounce: { type: Boolean, default: true },
+    click: { type: Boolean, default: true },
+    wheel: { type: Boolean, default: true },
+    refreshOnContentChange: { type: Boolean, default: true },
+    pullDownRefresh: { type: [Boolean, Object], default: false },
+    pullDownThreshold: { default: 70 },
+    pullDownStop: { default: 56 },
+    pullUpLoad: { type: [Boolean, Object], default: false },
+    pullUpThreshold: { default: 0 },
+    options: { default: () => ({}) }
+  },
+  emits: ["scroll", "pulling-down", "pulling-up"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    let isBScrollPluginInstalled = false;
+    let isBScrollPullDownInstalled = false;
+    let isBScrollPullUpInstalled = false;
+    const wrapperRef = ref(null);
+    const contentRef = ref(null);
+    const nativeScrollRef = ref(null);
+    const canScrollY = ref(false);
+    const canScrollX = ref(false);
+    const isScrollXEnabled = computed(() => props.direction === "horizontal" || props.direction === "both");
+    const isScrollYEnabled = computed(() => props.direction === "vertical" || props.direction === "both");
+    const isFreeScroll = computed(() => props.direction === "both");
+    const wrapperStyle = computed(() => {
+      return {
+        "--tx-scrollbar-min-size": `${props.scrollbarMinSize}px`
+      };
+    });
+    const wrapperClass = computed(() => {
+      const alwaysVisible = props.scrollbarAlwaysVisible || props.bounce && props.scrollbar && (isScrollYEnabled.value && !canScrollY.value || isScrollXEnabled.value && !canScrollX.value);
+      return {
+        "tx-scroll__wrapper--always-visible": alwaysVisible,
+        "tx-scroll__wrapper--wheeling": isWheeling.value
+      };
+    });
+    const contentStyle = computed(() => {
+      const style = {};
+      if (props.noPadding)
+        style.padding = "0";
+      if (isScrollXEnabled.value)
+        style.width = "max-content";
+      return style;
+    });
+    const nativeScrollStyle = computed(() => {
+      return {
+        overflowY: isScrollYEnabled.value ? "auto" : "hidden",
+        overflowX: isScrollXEnabled.value ? "auto" : "hidden",
+        overscrollBehaviorY: isScrollYEnabled.value ? props.scrollChaining ? "auto" : "contain" : "auto",
+        overscrollBehaviorX: isScrollXEnabled.value ? props.scrollChaining ? "auto" : "contain" : "auto"
+      };
+    });
+    let bs = null;
+    let ro = null;
+    let mo = null;
+    let wheelCleanup = null;
+    let refreshTimer = null;
+    let wheelIndicatorTimer = null;
+    let wheelEndTimer = null;
+    let wheelApplyRaf = null;
+    let wheelTargetX = null;
+    let wheelTargetY = null;
+    let bounceGuardUntil = 0;
+    let outOfBoundsSince = 0;
+    const isWheeling = ref(false);
+    let nativeTouchStartY = null;
+    let nativePullingDown = false;
+    let nativePullingUp = false;
+    function updateScrollAbility() {
+      if (!bs) {
+        canScrollX.value = false;
+        canScrollY.value = false;
+        return;
+      }
+      const maxX = typeof bs.maxScrollX === "number" ? bs.maxScrollX : 0;
+      const maxY = typeof bs.maxScrollY === "number" ? bs.maxScrollY : 0;
+      canScrollX.value = isScrollXEnabled.value && maxX < 0;
+      canScrollY.value = isScrollYEnabled.value && maxY < 0;
+    }
+    function scheduleRefresh() {
+      refreshTimer && window.clearTimeout(refreshTimer);
+      refreshTimer = window.setTimeout(() => {
+        bs?.refresh?.();
+        updateScrollAbility();
+      }, 16);
+    }
+    function emitScroll(scrollTop, scrollLeft) {
+      emit("scroll", { scrollTop, scrollLeft });
+    }
+    async function initBetterScroll() {
+      if (!wrapperRef.value)
+        return;
+      const { default: BScroll } = await import('@better-scroll/core');
+      const { default: ScrollBar } = await import('@better-scroll/scroll-bar');
+      if (!isBScrollPluginInstalled) {
+        BScroll.use(ScrollBar);
+        isBScrollPluginInstalled = true;
+      }
+      const shouldUsePullDown = props.pullDownRefresh !== false && (props.pullDownRefresh === true || typeof props.pullDownRefresh === "object");
+      const shouldUsePullUp = props.pullUpLoad !== false && (props.pullUpLoad === true || typeof props.pullUpLoad === "object");
+      if (shouldUsePullDown) {
+        if (!isBScrollPullDownInstalled) {
+          BScroll.use(PullDown);
+          isBScrollPullDownInstalled = true;
+        }
+      }
+      if (shouldUsePullUp) {
+        if (!isBScrollPullUpInstalled) {
+          BScroll.use(PullUp);
+          isBScrollPullUpInstalled = true;
+        }
+      }
+      const scrollbarOption = props.scrollbar ? {
+        fade: props.scrollbarFade,
+        interactive: props.scrollbarInteractive
+      } : false;
+      const pullDownOption = shouldUsePullDown ? {
+        threshold: props.pullDownThreshold,
+        stop: props.pullDownStop,
+        ...typeof props.pullDownRefresh === "object" ? props.pullDownRefresh : {}
+      } : false;
+      const pullUpOption = shouldUsePullUp ? {
+        threshold: props.pullUpThreshold,
+        ...typeof props.pullUpLoad === "object" ? props.pullUpLoad : {}
+      } : false;
+      const rawOptionsFromProps = props.options ?? {};
+      const { wheelOvershoot, ...optionsFromProps } = rawOptionsFromProps;
+      const hasUseTransitionOverride = Object.prototype.hasOwnProperty.call(optionsFromProps, "useTransition");
+      const shouldDisableTransitionByDefault = !hasUseTransitionOverride && props.wheel && props.bounce && typeof navigator !== "undefined" && (String(navigator.platform).includes("Mac") || String(navigator.userAgent).includes("Mac OS X"));
+      bs = new BScroll(wrapperRef.value, {
+        scrollX: isScrollXEnabled.value,
+        scrollY: isScrollYEnabled.value,
+        freeScroll: isFreeScroll.value,
+        probeType: props.probeType,
+        bounce: props.bounce,
+        click: props.click,
+        scrollbar: scrollbarOption,
+        pullDownRefresh: pullDownOption,
+        pullUpLoad: pullUpOption,
+        ...shouldDisableTransitionByDefault ? { useTransition: false } : {},
+        ...optionsFromProps
+      });
+      bs.on("scroll", (pos) => {
+        emitScroll(Math.abs(pos.y), Math.abs(pos.x));
+      });
+      if (shouldUsePullDown) {
+        bs.on("pullingDown", () => {
+          emit("pulling-down");
+        });
+      }
+      if (shouldUsePullUp) {
+        bs.on("pullingUp", () => {
+          emit("pulling-up");
+        });
+      }
+      scheduleRefresh();
+      const el = wrapperRef.value;
+      const RESISTANCE_FACTOR = 0.35;
+      const DEFAULT_WHEEL_OVERSHOOT = 120;
+      const resolvedWheelOvershoot = typeof wheelOvershoot === "number" && Number.isFinite(wheelOvershoot) ? wheelOvershoot : DEFAULT_WHEEL_OVERSHOOT;
+      const applyDeltaWithResistance = (base, delta, min, max, overshoot) => {
+        const next = base + delta;
+        if (overshoot <= 0)
+          return Math.max(min, Math.min(max, next));
+        if (next > max) {
+          const damped = base > max ? base + delta * RESISTANCE_FACTOR : max + (delta - (max - base)) * RESISTANCE_FACTOR;
+          return Math.min(max + overshoot, damped);
+        }
+        if (next < min) {
+          const damped = base < min ? base + delta * RESISTANCE_FACTOR : min + (delta - (min - base)) * RESISTANCE_FACTOR;
+          return Math.max(min - overshoot, damped);
+        }
+        return next;
+      };
+      const requestWheelApply = () => {
+        if (wheelApplyRaf !== null)
+          return;
+        wheelApplyRaf = window.requestAnimationFrame(() => {
+          wheelApplyRaf = null;
+          if (!bs)
+            return;
+          const x = wheelTargetX ?? (typeof bs.x === "number" ? bs.x : 0);
+          const y = wheelTargetY ?? (typeof bs.y === "number" ? bs.y : 0);
+          if (bs.pending)
+            bs?.stop?.();
+          bs.scrollTo(x, y, 0);
+        });
+      };
+      const onWheel = (e) => {
+        if (!bs)
+          return;
+        if (props.native)
+          return;
+        if (!props.wheel)
+          return;
+        if (e.ctrlKey)
+          return;
+        const maxX = typeof bs.maxScrollX === "number" ? bs.maxScrollX : -Infinity;
+        const maxY = typeof bs.maxScrollY === "number" ? bs.maxScrollY : -Infinity;
+        const canScrollXNow = isScrollXEnabled.value && maxX < 0;
+        const canScrollYNow = isScrollYEnabled.value && maxY < 0;
+        const currX = typeof bs.x === "number" ? bs.x : 0;
+        const currY = typeof bs.y === "number" ? bs.y : 0;
+        const dx = typeof e.deltaX === "number" ? e.deltaX : 0;
+        const dy = typeof e.deltaY === "number" ? e.deltaY : 0;
+        let effDx = dx;
+        let effDy = dy;
+        if (!isScrollYEnabled.value && isScrollXEnabled.value) {
+          if (effDx === 0 && effDy !== 0) {
+            effDx = effDy;
+            effDy = 0;
+          }
+        } else if (!isScrollXEnabled.value && isScrollYEnabled.value) {
+          if (effDy === 0 && effDx !== 0) {
+            effDy = effDx;
+            effDx = 0;
+          }
+        }
+        if (effDx === 0 && effDy === 0)
+          return;
+        const isPixelMode = typeof e.deltaMode !== "number" || e.deltaMode === 0;
+        const isOutXNow = isScrollXEnabled.value && (currX > 0 || currX < maxX);
+        const isOutYNow = isScrollYEnabled.value && (currY > 0 || currY < maxY);
+        const deltaXNow = isScrollXEnabled.value ? -effDx : 0;
+        const deltaYNow = isScrollYEnabled.value ? -effDy : 0;
+        const willScrollX = deltaXNow !== 0 && canScrollXNow;
+        const willScrollY = deltaYNow !== 0 && canScrollYNow;
+        if (!willScrollX && !willScrollY)
+          return;
+        const absDelta = Math.max(Math.abs(deltaXNow), Math.abs(deltaYNow));
+        const shouldBlockScrollChaining = !props.scrollChaining && (willScrollX || willScrollY);
+        if (props.bounce && isPixelMode) {
+          const now2 = typeof performance !== "undefined" ? performance.now() : Date.now();
+          if (now2 < bounceGuardUntil) {
+            const isPushingOutX = willScrollX && (currX >= 0 && deltaXNow > 0 || currX <= maxX && deltaXNow < 0);
+            const isPushingOutY = willScrollY && (currY >= 0 && deltaYNow > 0 || currY <= maxY && deltaYNow < 0);
+            if (isPushingOutX || isPushingOutY) {
+              if (e.cancelable)
+                e.preventDefault();
+              if (shouldBlockScrollChaining)
+                e.stopPropagation();
+              return;
+            }
+          }
+        }
+        const isBouncing = Boolean(bs.pending);
+        const isPushingFurtherOutXNow = willScrollX && isOutXNow && (currX > 0 && deltaXNow > 0 || currX < maxX && deltaXNow < 0);
+        const isPushingFurtherOutYNow = willScrollY && isOutYNow && (currY > 0 && deltaYNow > 0 || currY < maxY && deltaYNow < 0);
+        const shouldIgnoreWhileBouncing = props.bounce && isPixelMode && isBouncing && (isPushingFurtherOutXNow || isPushingFurtherOutYNow);
+        if (shouldIgnoreWhileBouncing) {
+          if (e.cancelable)
+            e.preventDefault();
+          if (shouldBlockScrollChaining)
+            e.stopPropagation();
+          return;
+        }
+        if (isBouncing)
+          bs?.stop?.();
+        const currXAfterStop = typeof bs.x === "number" ? bs.x : currX;
+        const currYAfterStop = typeof bs.y === "number" ? bs.y : currY;
+        isWheeling.value = true;
+        wheelIndicatorTimer && window.clearTimeout(wheelIndicatorTimer);
+        wheelIndicatorTimer = window.setTimeout(() => {
+          isWheeling.value = false;
+          wheelIndicatorTimer = null;
+        }, 520);
+        const baseX = wheelTargetX ?? currXAfterStop;
+        const baseY = wheelTargetY ?? currYAfterStop;
+        const overshoot = props.bounce ? resolvedWheelOvershoot : 0;
+        const isOutXBase = isScrollXEnabled.value && (baseX > 0 || baseX < maxX);
+        const isOutYBase = isScrollYEnabled.value && (baseY > 0 || baseY < maxY);
+        const isOutBase = isOutXBase || isOutYBase;
+        const now = typeof performance !== "undefined" ? performance.now() : Date.now();
+        if (!isOutBase) {
+          outOfBoundsSince = 0;
+        } else if (outOfBoundsSince === 0) {
+          outOfBoundsSince = now;
+        }
+        const OUT_OF_BOUNDS_NEAR_LIMIT_RATIO = 0.85;
+        let deltaX = willScrollX ? deltaXNow : 0;
+        let deltaY = willScrollY ? deltaYNow : 0;
+        const isPushingFurtherOutX = isOutXBase && (baseX > 0 && deltaX > 0 || baseX < maxX && deltaX < 0);
+        const isPushingFurtherOutY = isOutYBase && (baseY > 0 && deltaY > 0 || baseY < maxY && deltaY < 0);
+        if (props.bounce && overshoot > 0) {
+          const isNearLimitX = isPushingFurtherOutX && (baseX > 0 && baseX >= overshoot * OUT_OF_BOUNDS_NEAR_LIMIT_RATIO || baseX < maxX && baseX <= maxX - overshoot * OUT_OF_BOUNDS_NEAR_LIMIT_RATIO);
+          const isNearLimitY = isPushingFurtherOutY && (baseY > 0 && baseY >= overshoot * OUT_OF_BOUNDS_NEAR_LIMIT_RATIO || baseY < maxY && baseY <= maxY - overshoot * OUT_OF_BOUNDS_NEAR_LIMIT_RATIO);
+          if (isNearLimitX)
+            deltaX = 0;
+          if (isNearLimitY)
+            deltaY = 0;
+        }
+        const nextX = isScrollXEnabled.value ? applyDeltaWithResistance(baseX, deltaX, maxX, 0, overshoot) : baseX;
+        const nextY = isScrollYEnabled.value ? applyDeltaWithResistance(baseY, deltaY, maxY, 0, overshoot) : baseY;
+        const willMove = nextX !== baseX || nextY !== baseY;
+        if (shouldBlockScrollChaining) {
+          if (e.cancelable)
+            e.preventDefault();
+          e.stopPropagation();
+        }
+        const wheelEndDelay = isPixelMode ? 48 : absDelta < 40 ? 120 : 160;
+        const isPushingFurtherOut = isPushingFurtherOutX || isPushingFurtherOutY;
+        const OUT_OF_BOUNDS_MAX_HOLD_MS = 180;
+        const allowOutOfBoundsHold = props.bounce && isPixelMode && isOutBase && isPushingFurtherOut && outOfBoundsSince > 0 && now - outOfBoundsSince < OUT_OF_BOUNDS_MAX_HOLD_MS;
+        const shouldRefreshWheelEndTimer = !isOutBase || willMove && (!isPushingFurtherOut || allowOutOfBoundsHold);
+        if (wheelEndTimer !== null && shouldRefreshWheelEndTimer) {
+          window.clearTimeout(wheelEndTimer);
+          wheelEndTimer = null;
+        }
+        if (wheelEndTimer === null) {
+          wheelEndTimer = window.setTimeout(() => {
+            wheelEndTimer = null;
+            wheelTargetX = null;
+            wheelTargetY = null;
+            if (!bs)
+              return;
+            if (!props.bounce)
+              return;
+            const currentMaxX = typeof bs.maxScrollX === "number" ? bs.maxScrollX : -Infinity;
+            const currentMaxY = typeof bs.maxScrollY === "number" ? bs.maxScrollY : -Infinity;
+            const xNow = typeof bs.x === "number" ? bs.x : 0;
+            const yNow = typeof bs.y === "number" ? bs.y : 0;
+            const isOutX = isScrollXEnabled.value && (xNow > 0 || xNow < currentMaxX);
+            const isOutY = isScrollYEnabled.value && (yNow > 0 || yNow < currentMaxY);
+            if (!isOutX && !isOutY)
+              return;
+            const now2 = typeof performance !== "undefined" ? performance.now() : Date.now();
+            bounceGuardUntil = now2 + 900;
+            outOfBoundsSince = 0;
+            bs?.resetPosition?.(420);
+          }, wheelEndDelay);
+        }
+        if (!willMove)
+          return;
+        wheelTargetX = nextX;
+        wheelTargetY = nextY;
+        if (!shouldBlockScrollChaining) {
+          if (e.cancelable)
+            e.preventDefault();
+        }
+        requestWheelApply();
+      };
+      el.addEventListener("wheel", onWheel, { passive: false });
+      wheelCleanup = () => el.removeEventListener("wheel", onWheel);
+    }
+    function destroyBetterScroll() {
+      wheelCleanup?.();
+      wheelCleanup = null;
+      wheelIndicatorTimer && window.clearTimeout(wheelIndicatorTimer);
+      wheelIndicatorTimer = null;
+      wheelEndTimer && window.clearTimeout(wheelEndTimer);
+      wheelEndTimer = null;
+      wheelApplyRaf && window.cancelAnimationFrame(wheelApplyRaf);
+      wheelApplyRaf = null;
+      wheelTargetX = null;
+      wheelTargetY = null;
+      bounceGuardUntil = 0;
+      outOfBoundsSince = 0;
+      isWheeling.value = false;
+      if (mo) {
+        mo.disconnect();
+        mo = null;
+      }
+      refreshTimer && window.clearTimeout(refreshTimer);
+      refreshTimer = null;
+      if (bs) {
+        bs.destroy();
+        bs = null;
+      }
+      updateScrollAbility();
+    }
+    function setupResizeObserver() {
+      if (typeof ResizeObserver === "undefined")
+        return;
+      ro = new ResizeObserver(() => {
+        if (bs) {
+          bs.refresh();
+          updateScrollAbility();
+        }
+      });
+      if (wrapperRef.value)
+        ro.observe(wrapperRef.value);
+      if (contentRef.value)
+        ro.observe(contentRef.value);
+    }
+    function destroyResizeObserver() {
+      if (ro) {
+        ro.disconnect();
+        ro = null;
+      }
+    }
+    function setupMutationObserver() {
+      if (!props.refreshOnContentChange)
+        return;
+      if (typeof MutationObserver === "undefined")
+        return;
+      if (!contentRef.value)
+        return;
+      mo = new MutationObserver(() => {
+        scheduleRefresh();
+      });
+      mo.observe(contentRef.value, {
+        subtree: true,
+        childList: true,
+        characterData: true
+      });
+    }
+    function handleNativeScroll(e) {
+      const target = e.target;
+      emitScroll(target.scrollTop, target.scrollLeft);
+      if (!props.pullUpLoad)
+        return;
+      if (nativePullingUp)
+        return;
+      const distanceToBottom = target.scrollHeight - (target.scrollTop + target.clientHeight);
+      if (distanceToBottom <= props.pullUpThreshold) {
+        nativePullingUp = true;
+        emit("pulling-up");
+      }
+    }
+    function handleNativeTouchStart(e) {
+      if (!props.pullDownRefresh)
+        return;
+      if (nativePullingDown)
+        return;
+      if (!nativeScrollRef.value)
+        return;
+      if (nativeScrollRef.value.scrollTop > 0)
+        return;
+      const y = e.touches?.[0]?.clientY;
+      if (typeof y !== "number")
+        return;
+      nativeTouchStartY = y;
+    }
+    function handleNativeTouchEnd(e) {
+      if (!props.pullDownRefresh)
+        return;
+      if (nativePullingDown)
+        return;
+      if (!nativeScrollRef.value)
+        return;
+      if (nativeScrollRef.value.scrollTop > 0)
+        return;
+      const startY = nativeTouchStartY;
+      nativeTouchStartY = null;
+      const y = e.changedTouches?.[0]?.clientY;
+      if (typeof startY !== "number" || typeof y !== "number")
+        return;
+      const delta = y - startY;
+      if (delta >= props.pullDownThreshold) {
+        nativePullingDown = true;
+        emit("pulling-down");
+      }
+    }
+    __expose({
+      nativeScrollRef,
+      scrollTo(x, y, time = 0) {
+        if (props.native) {
+          nativeScrollRef.value?.scrollTo(x, y);
+          return;
+        }
+        if (bs) {
+          bs.scrollTo(-x, -y, time);
+        }
+      },
+      getScrollInfo() {
+        if (props.native && nativeScrollRef.value) {
+          const el = nativeScrollRef.value;
+          return {
+            scrollTop: el.scrollTop,
+            scrollLeft: el.scrollLeft,
+            scrollHeight: el.scrollHeight,
+            scrollWidth: el.scrollWidth,
+            clientHeight: el.clientHeight,
+            clientWidth: el.clientWidth
+          };
+        }
+        if (bs && wrapperRef.value) {
+          const el = wrapperRef.value;
+          return {
+            scrollTop: Math.abs(bs.y || 0),
+            scrollLeft: Math.abs(bs.x || 0),
+            scrollHeight: el.scrollHeight,
+            scrollWidth: el.scrollWidth,
+            clientHeight: el.clientHeight,
+            clientWidth: el.clientWidth
+          };
+        }
+        return {
+          scrollTop: 0,
+          scrollLeft: 0,
+          scrollHeight: 0,
+          scrollWidth: 0,
+          clientHeight: 0,
+          clientWidth: 0
+        };
+      },
+      refresh() {
+        if (bs) {
+          bs.refresh();
+          updateScrollAbility();
+        }
+      },
+      finishPullDown() {
+        if (props.native) {
+          nativePullingDown = false;
+          return;
+        }
+        if (bs) {
+          bs.finishPullDown?.();
+          scheduleRefresh();
+        }
+      },
+      finishPullUp() {
+        if (props.native) {
+          nativePullingUp = false;
+          return;
+        }
+        if (bs) {
+          bs.finishPullUp?.();
+          scheduleRefresh();
+        }
+      }
+    });
+    onMounted(async () => {
+      await nextTick();
+      if (!props.native) {
+        await initBetterScroll();
+        setupResizeObserver();
+        setupMutationObserver();
+      }
+    });
+    onUnmounted(() => {
+      destroyResizeObserver();
+      destroyBetterScroll();
+    });
+    watch(
+      () => props.native,
+      async (nextNative) => {
+        await nextTick();
+        destroyResizeObserver();
+        destroyBetterScroll();
+        if (!nextNative) {
+          await initBetterScroll();
+          setupResizeObserver();
+          setupMutationObserver();
+        }
+      }
+    );
+    watch(
+      () => [
+        props.direction,
+        props.scrollbar,
+        props.scrollbarFade,
+        props.scrollbarInteractive,
+        props.probeType,
+        props.bounce,
+        props.click,
+        props.wheel,
+        props.refreshOnContentChange,
+        props.pullDownRefresh,
+        props.pullDownThreshold,
+        props.pullDownStop,
+        props.pullUpLoad,
+        props.pullUpThreshold,
+        props.options
+      ],
+      async () => {
+        if (props.native)
+          return;
+        await nextTick();
+        destroyResizeObserver();
+        destroyBetterScroll();
+        await initBetterScroll();
+        setupResizeObserver();
+        setupMutationObserver();
+      },
+      { deep: true }
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["tx-scroll", { "is-native": __props.native }])
+      }, [
+        __props.native ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          ref_key: "nativeScrollRef",
+          ref: nativeScrollRef,
+          class: "tx-scroll__native",
+          style: normalizeStyle(nativeScrollStyle.value),
+          onScroll: handleNativeScroll,
+          onTouchstart: handleNativeTouchStart,
+          onTouchend: handleNativeTouchEnd
+        }, [
+          renderSlot(_ctx.$slots, "header", {}, void 0, true),
+          createElementVNode("div", {
+            class: "tx-scroll__content",
+            style: normalizeStyle(contentStyle.value)
+          }, [
+            renderSlot(_ctx.$slots, "default", {}, void 0, true),
+            renderSlot(_ctx.$slots, "footer", {}, void 0, true)
+          ], 4)
+        ], 36)) : (openBlock(), createElementBlock("div", {
+          key: 1,
+          ref_key: "wrapperRef",
+          ref: wrapperRef,
+          class: normalizeClass(["tx-scroll__wrapper", wrapperClass.value]),
+          style: normalizeStyle(wrapperStyle.value)
+        }, [
+          createElementVNode("div", {
+            ref_key: "contentRef",
+            ref: contentRef,
+            class: "tx-scroll__content",
+            style: normalizeStyle(contentStyle.value)
+          }, [
+            renderSlot(_ctx.$slots, "header", {}, void 0, true),
+            renderSlot(_ctx.$slots, "default", {}, void 0, true),
+            renderSlot(_ctx.$slots, "footer", {}, void 0, true)
+          ], 4)
+        ], 6))
+      ], 2);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/es/scroll/src/types.d.ts

@@ -0,0 +1,8 @@
+export interface TxScrollInfo {
+    scrollTop: number;
+    scrollLeft: number;
+    scrollHeight: number;
+    scrollWidth: number;
+    clientHeight: number;
+    clientWidth: number;
+}