Merge remote-tracking branch 'origin/master'

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 (targetHeight.value === 0) { return 0; }
-      if (test === 0) { return 0; }
+      topBound = -targetHeight.value + 440;
-      topBound = -test + 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`;
     });
 
+    const getHeight = () => {
+      if (scrollTarget) {
+        return scrollTarget.getBoundingClientRect().height as number;
+      }
+    }
+
+    const handleScrollEvent = (verticalScroll: number) => {
+        if (scrollTarget) {
+          // only scroll if renderer height is greater than main window
+          const heightResult = getHeight();
+          if (heightResult) {
+            if (heightResult > 500) { 
+              targetHeight.value = heightResult;
+              scroll.value += verticalScroll;
+            }
+          }
+        }
+    }
+
     onMounted(() => {
       scrollTarget = document.getElementById(targetId);
-    });
-
-    window.addEventListener(
-      "wheel",
-      (e) => {
       if (scrollTarget) {
-          // get renderer height
+        window.addEventListener("wheel", (e) => {
-          targetHeight.value = scrollTarget.getBoundingClientRect().height;
+          const verticalScroll = e.deltaY * 0.25;
-          // only scroll if renderer height is greater than main window
+          handleScrollEvent(verticalScroll);
-          if (targetHeight.value > 500) {
+        })
-            scroll.value += e.deltaY * 0.25;
       }
-        }
+    });
-      },
-      { passive: true }
-    );
 
     return {
       scrollView