add scroller composable

src/components/UI/UIDetails/messageRenderer.vue

@@ -3,7 +3,7 @@
     version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
-    :viewBox="testBox"
+    :viewBox="scrollView"
   >
     <g id="messageRenderer">
       <g
@@ -28,14 +28,11 @@
 
 <script lang="ts">
 import useMessageRenderer from "@/composables/messageRenderer/useMessageRenderer";
+import useScroller from "@/composables/scroller/useScroller";
 import {
   defineComponent,
   reactive,
-  ref,
   inject,
-  computed,
-  onMounted,
-  render,
 } from "vue";
 import MessageItem from "./messageItem.vue";
 import { Message } from "@/types/message/index";
@@ -45,45 +42,6 @@ export default defineComponent({
   components: { MessageItem },
   setup() {
     const renderArr: Message[] = reactive([]);
-    const scroll = ref(0);
-    let renderer: any;
-    const rendererHeight = ref(0);
-    let topBound: number;
-
-    const clampedScroll = computed(() => {
-      const test = rendererHeight.value;
-      if (test === 0) { return 0; }
-      topBound = -test + 440;
-      return Math.max(topBound, Math.min(scroll.value, 0)) as number;
-    })
-
-    const testBox = computed(() => {
-      if (clampedScroll.value === 0) {
-        scroll.value = 0;
-      } else if (clampedScroll.value === topBound) {
-        scroll.value = topBound;
-      }
-      return `0 ${clampedScroll.value} 350 500`;
-    });
-
-    onMounted(() => {
-      renderer = document.getElementById("messageRenderer");
-    });
-
-    window.addEventListener(
-      "wheel",
-      (e) => {
-        if (renderer) {
-          // get renderer height
-          rendererHeight.value = renderer.getBoundingClientRect().height;
-          // only scroll if renderer height is greater than main window
-          if (rendererHeight.value > 500) {
-            scroll.value += e.deltaY * 0.25;
-          }
-        }
-      },
-      { passive: true }
-    );
 
     // imports mitt Emitter safely
     let emitter: Mitt;
@@ -96,13 +54,14 @@ export default defineComponent({
     }
 
     const { beforeEnter, enter, afterEnter } = useMessageRenderer();
+    const {scrollView} = useScroller({ targetId: "messageRenderer"});
 
     return {
       renderArr,
       beforeEnter,
       enter,
       afterEnter,
-      testBox,
+      scrollView,
     };
   },
 });

src/composables/scroller/useScroller.ts

@@ -0,0 +1,48 @@
+import {ref, computed, onMounted} from "vue";
+export default function useScroller({ targetId }: {targetId: string}) {
+
+    const scroll = ref(0);
+    let scrollTarget: HTMLElement | SVGElement | null;
+    const targetHeight = ref(0);
+    let topBound: number;
+
+    const clampedScroll = computed(() => {
+      const test = targetHeight.value;
+      if (test === 0) { return 0; }
+      topBound = -test + 440;
+      return Math.max(topBound, Math.min(scroll.value, 0)) as number;
+    })
+
+    const scrollView = computed(() => {
+      if (clampedScroll.value === 0) {
+        scroll.value = 0;
+      } else if (clampedScroll.value === topBound) {
+        scroll.value = topBound;
+      }
+      return `0 ${clampedScroll.value} 350 500`;
+    });
+
+    onMounted(() => {
+      scrollTarget = document.getElementById(targetId);
+    });
+
+    window.addEventListener(
+      "wheel",
+      (e) => {
+        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;
+          }
+        }
+      },
+      { passive: true }
+    );
+
+    return {
+      scrollView
+    }
+
+}