installed jquery and jquery types

package-lock.json

@@ -2527,6 +2527,14 @@
         "jest-diff": "^24.3.0"
       }
     },
+    "@types/jquery": {
+      "version": "3.5.14",
+      "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.14.tgz",
+      "integrity": "sha512-X1gtMRMbziVQkErhTQmSe2jFwwENA/Zr+PprCkF63vFq+Yt5PZ4AlKqgmeNlwgn7dhsXEK888eIW2520EpC+xg==",
+      "requires": {
+        "@types/sizzle": "*"
+      }
+    },
     "@types/json-schema": {
       "version": "7.0.9",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.9.tgz",
@@ -2606,8 +2614,7 @@
     "@types/sizzle": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.2.tgz",
-      "integrity": "sha512-7EJYyKTL7tFR8+gDbB6Wwz/arpGa0Mywk1TJbNzKzHtzbwVmY4HR9WqS5VV7dsBUKQmPNr192jHr/VpBluj/hg==",
-      "dev": true
+      "integrity": "sha512-7EJYyKTL7tFR8+gDbB6Wwz/arpGa0Mywk1TJbNzKzHtzbwVmY4HR9WqS5VV7dsBUKQmPNr192jHr/VpBluj/hg=="
     },
     "@types/source-list-map": {
       "version": "0.1.2",
@@ -12778,6 +12785,11 @@
         }
       }
     },
+    "jquery": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
+      "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw=="
+    },
     "js-base64": {
       "version": "2.6.4",
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",

package.json

@@ -10,11 +10,13 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@types/jquery": "^3.5.14",
     "axios": "^0.24.0",
     "d3": "^7.3.0",
     "d3-tip": "^0.9.1",
     "echarts": "^5.2.2",
     "element-plus": "^2.0.2",
+    "jquery": "^3.6.0",
     "lodash": "^4.17.21",
     "pinia": "^2.0.5",
     "vue": "^3.0.0",

src/components/FullVue.vue

@@ -53,6 +53,7 @@ export default defineComponent({
     const p = useRoute().params;
     const currentItem = ref("");
     const scrollWrapRef = ref<any>(null);
+    const isScrolling = ref(false)
     watch(
       () => dashboardStore.layout,
       () => {
@@ -90,6 +91,7 @@ export default defineComponent({
     onMounted(() => {
       observeItems();
       initScroller();
+      console.log(scrollWrapRef.value)
     });
     return {
       t,
@@ -106,14 +108,11 @@ export default defineComponent({
 .scroll-snap-container {
   height: 90vh;
   display: block;
-  overflow-y: scroll;
-  overflow-x: hidden;
-  -webkit-overflow-scrolling: touch;
-  scroll-snap-points-y: repeat(100%);
-  scroll-snap-destination: 0 0;
-  scroll-snap-type: y mandatory;
-  scroll-snap-type: mandatory;
   scroll-behavior: smooth;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  perspective: 1000;
+  overflow: hidden;
   .scroll-handler__wrapper {
     z-index: 20;
     position: fixed;
@@ -144,10 +143,10 @@ export default defineComponent({
   display: none;
 }
 .item {
-  scroll-snap-align: start;
+  // scroll-snap-align: start;
   height: 100%;
-  padding: 40px;
-  margin: 40px 0;
+  // padding: 40px;
+  // margin: 40px 0;
   // background: orange;
 }
 </style>