@oiij/use/dist/composables/use-scroll-view.cjs

Som Composable Functions for Vue 3

const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
const __vueuse_core = require_rolldown_runtime.__toESM(require("@vueuse/core"));
const vue = require_rolldown_runtime.__toESM(require("vue"));

//#region src/composables/use-scroll-view.ts
function useScrollView(options) {
	const { activeClassName = ".active", enableWheel = true, direction = "vertical" } = options ?? {};
	const scrollRef = (0, vue.ref)();
	const { width, height } = (0, __vueuse_core.useElementSize)(scrollRef);
	async function scrollToView(options$1) {
		await (0, vue.nextTick)();
		const activeEl = scrollRef.value?.querySelector(activeClassName);
		if (!activeEl) return;
		activeEl.scrollIntoView({
			behavior: "smooth",
			block: "nearest",
			inline: "nearest",
			...options$1
		});
	}
	function wheelEvent(e) {
		if (!enableWheel) return;
		e.preventDefault();
		const { deltaY } = e;
		switch (direction) {
			case "vertical":
				scrollRef.value?.scrollBy({
					top: deltaY > 0 ? height.value : -height.value,
					behavior: "smooth"
				});
				break;
			case "horizontal":
				scrollRef.value?.scrollBy({
					left: deltaY > 0 ? width.value : -width.value,
					behavior: "smooth"
				});
				break;
		}
	}
	(0, __vueuse_core.useEventListener)(scrollRef, "wheel", wheelEvent);
	const debouncedScrollToView = (0, __vueuse_core.useDebounceFn)(scrollToView, 500);
	(0, vue.watch)([width, height], () => {
		debouncedScrollToView();
	});
	return {
		scrollRef,
		scrollToView
	};
}

//#endregion
exports.useScrollView = useScrollView;