feat: Scroll snap

Enable scroll snap on home page with an option (default false) Signed-off-by: Rémy Jacquin <[email protected]>
hugo-toha · Feb 12, 2025 · 9de81bc · 9de81bc
1 parent aa91957
commit 9de81bc
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 8 deletions.
diff --git a/assets/scripts/sections/navbar.js b/assets/scripts/sections/navbar.js
@@ -2,8 +2,9 @@ const updateNavBar = () => {
   const topNavbar = document.getElementById('top-navbar')
   const navbarToggler = document.getElementById('navbar-toggler')
   const themeIcon = document.getElementById('navbar-theme-icon-svg')
+  const scrollContainer = document.querySelector('body');
 
-  if (window.scrollY > 40) {
+  if (scrollContainer.scrollTop > 40) {
     topNavbar?.classList.remove('transparent-navbar')
     topNavbar?.classList.add('shadow')
 
@@ -44,8 +45,9 @@ document.addEventListener('DOMContentLoaded', function () {
   // When the user scrolls down 80px from the top of the document,
   // resize the navbar's padding and the logo's font size
   const topNavbar = document.getElementById('top-navbar')
+  const scrollContainer = document.querySelector('body');
   if (topNavbar?.classList.contains('homepage')) {
-    document.addEventListener('scroll', updateNavBar)
+    scrollContainer.addEventListener('scroll', updateNavBar)
     updateNavBar()
   }
 

diff --git a/assets/styles/layouts/main.scss b/assets/styles/layouts/main.scss
@@ -1,20 +1,35 @@
-/* 
+/*
   Removed smooth scrolling implementation in main.js in favor of
   simpler css approach.
-  See: https://css-tricks.com/snippets/jquery/smooth-scrolling/ 
+  See: https://css-tricks.com/snippets/jquery/smooth-scrolling/
 */
 *,
 html {
   scroll-behavior: smooth !important;
+  overflow-y: hidden;
 }
 
 body {
   position: relative;
+  overflow-y: scroll;
+  height: 100vh;
+}
+
+body.scroll-container {
+  scroll-snap-type: y mandatory;
+}
+
+/*
+  Enable scroll snap for home page
+*/
+div#home,
+div.section-holder {
+  scroll-snap-align: start;
 }
 
 /*
   Fixes anchor overlapping with header.
-  See: https://stackoverflow.com/questions/4086107/fixed-page-header-overlaps-in-page-anchors 
+  See: https://stackoverflow.com/questions/4086107/fixed-page-header-overlaps-in-page-anchors
   */
 :target::before {
   content: '';

diff --git a/layouts/index.html b/layouts/index.html
@@ -10,11 +10,11 @@
       {{ end }}
     {{ end }}
     <meta name="description" content="{{ $siteDescription }}" />
-    
+
     <!-- import common headers -->
     {{- partial "header.html" . -}}
     {{- partial "opengraph.html" . -}}
-    
+
     <!--================= add analytics if enabled =========================-->
     {{- partial "analytics.html" . -}}
     {{ with resources.Get "scripts/core/theme-scheme.js" | fingerprint }}
@@ -23,7 +23,7 @@
     </script>
     {{ end }}
   </head>
-  <body data-bs-spy="scroll" data-bs-target="#top-navbar" data-bs-offset="100">
+  <body data-bs-spy="scroll" data-bs-target="#top-navbar" data-bs-offset="100" {{ if site.Params.features.scrollSnap.enable | default false }}class="scroll-container"{{end}}>
 
     <!--- NAVBAR ------------------------->
     {{- partial "navigators/navbar.html" . -}}