works better in ide portal

src/components/FullVue.vue

@@ -19,6 +19,7 @@ limitations under the License. -->
         @click="scrollToGraph(item.i, index)"
         v-for="(item, index) in items"
         :key="item.i"
+        :id="'scroll' + item.i"
         :class="[currentItem === index ? 'active' : '']"
         class="full-scroll-to"
       ></div>
@@ -31,13 +32,29 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts">
-import * as $ from "jquery";
+import { ref, watch, onMounted, onBeforeUnmount, defineComponent } from "vue";
-import { ref, watch, onMounted, defineComponent } from "vue";
 import { useI18n } from "vue-i18n";
-import { useRoute } from "vue-router";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import Configuration from "../views/dashboard/configuration";
 import controls from "../views/dashboard/controls/index";
+import { useRoute } from "vue-router";
+
+let isScrolling = false;
+function scrollStop(callback: { (): void; (): void }, refresh = 66) {
+  let scrollListener: number;
+  window.addEventListener(
+    "scroll",
+    function (event) {
+      isScrolling = true;
+      window.clearTimeout(scrollListener);
+      scrollListener = window.setTimeout(callback, refresh);
+    },
+    true
+  );
+}
+scrollStop(function () {
+  isScrolling = false;
+});
 
 export default defineComponent({
   name: "FullView",
@@ -51,11 +68,10 @@ export default defineComponent({
   setup() {
     const dashboardStore = useDashboardStore();
     const { t } = useI18n();
-    const p = useRoute().params;
     const arrayOfItems = ref<Element[]>([]);
     const currentItem = ref<number>(0);
     const scrollWrapRef = ref<any>(null);
-    const isScrolling = ref(false);
+    const { path, query } = useRoute();
     watch(
       () => dashboardStore.layout,
       () => {
@@ -65,8 +81,13 @@ export default defineComponent({
       }
     );
     function scrollToGraph(e: any, index: number) {
-      document?.getElementById(`item${e}`)?.scrollIntoView();
+      isScrolling = true;
-      currentItem.value = index;
+      let el = document.getElementById(`item${e}`);
+
+      if (el != null) {
+        el.scrollIntoView();
+        currentItem.value = index;
+      }
     }
     function observeItems() {
       const observer = new IntersectionObserver((entries) => {
@@ -82,19 +103,18 @@ export default defineComponent({
       });
     }
     function scrollTo(index: number) {
-      arrayOfItems.value[index]?.scrollIntoView();
+      let scrollIndex = arrayOfItems.value[index];
-      if (isScrolling.value) {
+      if (scrollIndex) {
-        setTimeout(() => {
+        let el = document.getElementById(`scroll${scrollIndex.id.substr(4)}`);
-          isScrolling.value = false;
+        if (el != null) {
-        }, 800);
+          el.click();
+        }
       }
     }
     function scrollUp() {
       if (currentItem.value > 0) {
         currentItem.value--;
         scrollTo(currentItem.value);
-      } else if (currentItem.value === 0) {
-        isScrolling.value = false;
       }
     }
     function scrollDown() {
@@ -102,27 +122,49 @@ export default defineComponent({
         currentItem.value++;
         scrollTo(currentItem.value);
       } else if (currentItem.value === arrayOfItems?.value?.length - 1) {
-        isScrolling.value = true;
         currentItem.value = 0;
         scrollTo(currentItem.value);
       }
     }
-    function initScroller() {
+    function wheelGraphScroll(e: WheelEvent) {
-      scrollWrapRef?.value?.addEventListener("wheel", (e: WheelEvent) => {
+      e.preventDefault();
-        if (isScrolling.value === false) {
+      if (!isScrolling) {
-          isScrolling.value = true;
+        if (e.deltaY < 0) {
-          if (e.deltaY < 0) {
+          scrollUp();
-            scrollUp();
+        } else {
-          } else {
+          scrollDown();
-            scrollDown();
-          }
         }
-      });
+      }
+    }
+    function keyGraphScroll(e: KeyboardEvent) {
+      if (e.keyCode == 38) {
+        e.preventDefault();
+        scrollUp();
+      } else if (e.keyCode === 40) {
+        e.preventDefault();
+        scrollDown();
+      }
+    }
+    function initScroller() {
+      //todo: smarter logic on when to add listeners
+      if (query["portal"] === "true" && path.endsWith("Activity")) {
+        console.log("Adding portal wheel/key listeners");
+        scrollWrapRef?.value?.addEventListener("wheel", wheelGraphScroll, {
+          passive: false,
+        });
+        document.addEventListener("keydown", keyGraphScroll, {
+          passive: false,
+        });
+      }
     }
     onMounted(() => {
       observeItems();
       initScroller();
     });
+    onBeforeUnmount(() => {
+      scrollWrapRef?.value?.removeEventListener("wheel", wheelGraphScroll);
+      document.removeEventListener("keydown", keyGraphScroll);
+    });
     return {
       t,
       dashboardStore,