fix: use newer scroll polyfill to allow offset

close #17
jonaskuske · Mar 11, 2022 · f07bd70 · f07bd70
1 parent 8fc1873
commit f07bd70
Show file tree

Hide file tree

Showing 8 changed files with 30 additions and 10 deletions.
diff --git a/src/assets/css/tailwind.css b/src/assets/css/tailwind.css
@@ -134,8 +134,9 @@ input[type='search']::-webkit-search-results-decoration {
   scroll-behavior: smooth;
 }
 
-.scroll-pt-20 {
-  scroll-padding-top: 5rem;
+.scroll-mt-20 {
+  scroll-snap-margin-top: 5rem;
+  scroll-margin-top: 5rem;
 }
 
 .bg-angled-yellow {

diff --git a/src/assets/js/polyfills.js b/src/assets/js/polyfills.js
@@ -1,7 +1,9 @@
 'use strict'
 ;(function loadPolyfills(doc, base) {
   if (!('scrollBehavior' in doc.documentElement.style)) {
-    insertScript(base + 'smoothscroll-polyfill.min.js')
+    insertScript(base + 'seamless-scroll-polyfill.min.js', function () {
+      window.seamless.polyfill()
+    })
     insertScript(base + 'smoothscroll-anchor-polyfill.min.js')
   }
 

diff --git a/src/assets/js/vendor/seamless-scroll-polyfill.min.js b/src/assets/js/vendor/seamless-scroll-polyfill.min.js
diff --git a/src/assets/js/vendor/smoothscroll-anchor-polyfill.min.js b/src/assets/js/vendor/smoothscroll-anchor-polyfill.min.js
diff --git a/src/assets/js/vendor/smoothscroll-polyfill.min.js b/src/assets/js/vendor/smoothscroll-polyfill.min.js
diff --git a/src/site/config/asset-manifest.php b/src/site/config/asset-manifest.php
@@ -12,7 +12,7 @@
   '/assets/js/vendor/alpine.min.js',
   '/assets/js/vendor/focus-visible.min.js',
   '/assets/js/vendor/object-fit-images.min.js',
-  '/assets/js/vendor/smoothscroll-polyfill.min.js',
+  '/assets/js/vendor/seamless-scroll-polyfill.min.js',
   '/assets/js/vendor/smoothscroll-anchor-polyfill.min.js',
   '/assets/fonts/Chivo_Light-Italic.woff2',
   '/assets/fonts/Chivo_Regular.woff2',

diff --git a/src/site/snippets/head.php b/src/site/snippets/head.php
@@ -1,7 +1,7 @@
 <!doctype html>
 <html
   lang="de"
-  class="h-full font-sans antialiased leading-normal scroll-smooth scroll-pt-20 scrollbar-lightgray"
+  class="h-full font-sans antialiased leading-normal scroll-smooth scrollbar-lightgray"
 >
 
 <?php