From 9de81bc9a0b341d19fb7276bd6aae7dc3caf7cb8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9my=20Jacquin?= Date: Wed, 12 Feb 2025 14:38:50 +0100 Subject: [PATCH] feat: Scroll snap MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Enable scroll snap on home page with an option (default false) Signed-off-by: Rémy Jacquin --- assets/scripts/sections/navbar.js | 6 ++++-- assets/styles/layouts/main.scss | 21 ++++++++++++++++++--- layouts/index.html | 6 +++--- 3 files changed, 25 insertions(+), 8 deletions(-) diff --git a/assets/scripts/sections/navbar.js b/assets/scripts/sections/navbar.js index 0a1b22148..7cda2b527 100644 --- 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 index 509c31345..3284a7939 100644 --- 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 index cd8afbcaa..c3b7a2862 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -10,11 +10,11 @@ {{ end }} {{ end }} - + {{- partial "header.html" . -}} {{- partial "opengraph.html" . -}} - + {{- partial "analytics.html" . -}} {{ with resources.Get "scripts/core/theme-scheme.js" | fingerprint }} @@ -23,7 +23,7 @@ {{ end }} - + {{- partial "navigators/navbar.html" . -}}