diff --git a/src/composables/scroller/useScroller.ts b/src/composables/scroller/useScroller.ts index 302ff60..6bf195e 100644 --- a/src/composables/scroller/useScroller.ts +++ b/src/composables/scroller/useScroller.ts @@ -7,9 +7,8 @@ export default function useScroller({ targetId }: {targetId: string}) { let topBound: number; const clampedScroll = computed(() => { - const test = targetHeight.value; - if (test === 0) { return 0; } - topBound = -test + 440; + if (targetHeight.value === 0) { return 0; } + topBound = -targetHeight.value + 440; return Math.max(topBound, Math.min(scroll.value, 0)) as number; }) @@ -22,24 +21,34 @@ export default function useScroller({ targetId }: {targetId: string}) { return `0 ${clampedScroll.value} 350 500`; }); - onMounted(() => { - scrollTarget = document.getElementById(targetId); - }); + const getHeight = () => { + if (scrollTarget) { + return scrollTarget.getBoundingClientRect().height as number; + } + } - window.addEventListener( - "wheel", - (e) => { + const handleScrollEvent = (verticalScroll: number) => { if (scrollTarget) { - // get renderer height - targetHeight.value = scrollTarget.getBoundingClientRect().height; // only scroll if renderer height is greater than main window - if (targetHeight.value > 500) { - scroll.value += e.deltaY * 0.25; + const heightResult = getHeight(); + if (heightResult) { + if (heightResult > 500) { + targetHeight.value = heightResult; + scroll.value += verticalScroll; + } } } - }, - { passive: true } - ); + } + + onMounted(() => { + scrollTarget = document.getElementById(targetId); + if (scrollTarget) { + window.addEventListener("wheel", (e) => { + const verticalScroll = e.deltaY * 0.25; + handleScrollEvent(verticalScroll); + }) + } + }); return { scrollView