fix scroll bug, first message offsets on scroll

src/composables/messageRenderer/useMessageRenderer.ts

@@ -6,7 +6,6 @@ export default function useMessageRenderer() {
     const { shiftAnimate, stackAnimate } = useRendererAnims();
 
     let messageList: NodeList;
-    let modifier: string;
     let message: HTMLElement | null;
     let messageOffset = { x: 0, y: 0 };
     let shift = false;
@@ -21,7 +20,6 @@ export default function useMessageRenderer() {
     }
 
     function beforeEnter(el: SVGGElement): void {
-        modifier = el.className.baseVal.substring(0, 2);
         const queryResult = document.querySelectorAll(".messageList");
         if (queryResult.length) messageList = queryResult;
     }

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