fix: fixed script from lenis to smooth scrolling, moving it to body tag

2026-03-03 10:27:54 -05:00
parent ff26e3c329
commit c22f5d722a
1 changed files with 21 additions and 44 deletions
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -24,6 +24,11 @@ const { pageTitle } = Astro.props;
        <link rel="icon" href="/favicon.ico" />
        <meta name="generator" content={Astro.generator} />
        <title>{pageTitle ? `Naliia | ${pageTitle}` : "Naliia"}</title>
+
+        <link
+            rel="stylesheet"
+            href="https://unpkg.com/lenis@1.3.17/dist/lenis.css"
+        />
    </head>

    <body>
@@ -86,6 +91,22 @@ const { pageTitle } = Astro.props;
        <footer class="footer">
            <Footer />
        </footer>
+
+        <script>
+            import Lenis from "lenis";
+
+            const lenis = new Lenis({
+                touchMultiplier: 2,
+                infinite: false,
+            });
+
+            function raf(time: number) {
+                lenis.raf(time);
+                requestAnimationFrame(raf);
+            }
+
+            requestAnimationFrame(raf);
+        </script>
    </body>
 </html>

@@ -100,47 +121,7 @@ const { pageTitle } = Astro.props;
    }
 </script>

-<script>
-    import Lenis from "lenis";
-
-    // Inicialización de Lenis
-    const lenis = new Lenis({
-        duration: 1.2,
-        easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
-        direction: "vertical",
-        gestureDirection: "vertical",
-        smoothHover: true,
-        // En móviles a veces es mejor dejarlo en false para no interferir con el scroll nativo
-        smoothTouch: false,
-    });
-
-    // Función de actualización (Raf)
-    function raf(time: number) {
-        lenis.raf(time);
-        requestAnimationFrame(raf);
-    }
-
-    requestAnimationFrame(raf);
-</script>
-
 <style>
-    /* Estilos base para Lenis */
-    html.lenis {
-        height: auto;
-    }
-
-    .lenis.lenis-smooth {
-        scroll-behavior: auto !important;
-    }
-
-    .lenis.lenis-smooth [data-lenis-prevent] {
-        overscroll-behavior: contain;
-    }
-
-    .lenis.lenis-stopped {
-        overflow: hidden;
-    }
-
    /* Estilos globales */
    html {
        margin: 0;
@@ -161,10 +142,6 @@ const { pageTitle } = Astro.props;
        display: flex;
        flex-direction: column;
        overflow-x: clip;
-
-        /* background-image: url("/src/assets/imgs/n-naliia-rosada-fondo.webp");
-        background-repeat: no-repeat;
-        background-position: top right; */
    }

    body::before {