Fix smooth scroll

nnnlog · Jul 10, 2024 · d5554ac · d5554ac
1 parent 2e3e221
commit d5554ac
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 3 deletions.
diff --git a/public/index.html b/public/index.html
@@ -6,9 +6,91 @@
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <link rel="icon" href="<%= BASE_URL %>favicon.ico">
   <title><%= htmlWebpackPlugin.options.title %></title>
-  <script src="https://rawcdn.githack.com/hasnainalsyed/smooth-scroll-js/74ffa6c38d56463ab259d267a2492a67b3e807a1/smooth-scroll.js"></script>
+  <script>
+    function init() {
+      new SmoothScroll(document, 120, 12);
+    }
+
+    function SmoothScroll(target, speed, smooth) {
+      if (target === document)
+        target = (document.scrollingElement
+          || document.documentElement
+          || document.body.parentNode
+          || document.body); // cross browser support for document scrolling
+
+      var moving = false;
+      var pos = target.scrollTop;
+      var frame = target === document.body
+      && document.documentElement
+        ? document.documentElement
+        : target; // safari is the new IE
+
+      target.addEventListener("mousewheel", scrolled, { passive: false });
+      target.addEventListener("DOMMouseScroll", scrolled, { passive: false });
+
+      function scrolled(e) {
+        // console.log(e);
+        e.preventDefault(); // disable default scrolling
+
+        var delta = normalizeWheelDelta(e);
+
+        if (pos === -1) {
+          pos = target.scrollTop;
+        }
+        pos += -delta * speed;
+        pos = Math.max(0, Math.min(pos, target.scrollHeight - frame.clientHeight)); // limit scrolling
+
+        if (!moving) update();
+      }
+
+      function normalizeWheelDelta(e) {
+        if (e.detail) {
+          if (e.wheelDelta)
+            return e.wheelDelta / e.detail / 40 * (e.detail > 0 ? 1 : -1); // Opera
+          else
+            return -e.detail / 3; // Firefox
+        } else
+          return e.wheelDelta / 120; // IE,Safari,Chrome
+      }
+
+      function update() {
+        if (pos === -1) {
+          requestFrame(update);
+          return;
+        }
+
+        moving = true;
+
+        var delta = Math.ceil((pos - target.scrollTop) / smooth);
+
+        target.scrollTop += delta;
+        // console.log(pos, target.scrollTop, delta);
+
+        if (Math.abs(pos - target.scrollTop) >= 1)
+          requestFrame(update);
+        else {
+          target.scrollTop = pos;
+          moving = false;
+          pos = -1;
+        }
+      }
+
+      var requestFrame = function() { // requestAnimationFrame cross browser
+        return (
+          window.requestAnimationFrame ||
+          window.webkitRequestAnimationFrame ||
+          window.mozRequestAnimationFrame ||
+          window.oRequestAnimationFrame ||
+          window.msRequestAnimationFrame ||
+          function(func) {
+            window.setTimeout(func, 1000 / 50);
+          }
+        );
+      }();
+    }
+  </script>
 </head>
-<body>
+<body onload="init()">
 <noscript>
   <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
     Please enable it to continue.</strong>

diff --git a/src/App.vue b/src/App.vue
@@ -19,7 +19,6 @@
 <script lang="ts" setup>
 import IntroComponent from "@/components/IntroComponent.vue";
 import { onMounted, ref } from "vue";
-import LoadingComponent from "@/components/LoadingComponent.vue";
 
 let isLoaded = ref(false);
 

diff --git a/src/router/index.ts b/src/router/index.ts
@@ -36,6 +36,12 @@ const routes: Array<RouteRecordRaw> = [
 const router = createRouter({
   history: createWebHistory(),
   routes,
+  scrollBehavior: (to, from, savedPosition) => {
+    if (savedPosition) return savedPosition;
+    return {
+      top: 0,
+    };
+  },
 });
 
 export default router;
diff --git a/src/views/NotFoundView.vue b/src/views/NotFoundView.vue
@@ -40,6 +40,8 @@ export default defineComponent({
 
   a {
     cursor: pointer;
+    font-size: 1.5rem;
+    margin-top: 1rem;
   }
 
   .mdi {