Remove custom scrolling behaviour by using padding hack

Main content left padding now automatically adjusted to be exactly the panel width. Main content is then positioned absolutely to fill the screen's width and thus can scroll anywhere.

index.html

@@ -280,7 +280,10 @@ <h2>Contact me</h2>
 
             <footer>
                 <div class="content">
-                    <p>Copyright Tom Chapman &copy; 2023. Designed with Figma, and built with pure HTML, SCSS and JS.</p>
+                    <p>
+                        Copyright Tom Chapman &copy; 2023. Designed with Figma, and built with pure HTML, SCSS and JS.
+                        <br>Layout inspired by <a href="https://brittanychiang.com/">Brittany Chiang</a>.
+                    </p>
                 </div>
             </footer>
         </main>

js/index.js

@@ -1,3 +1,6 @@
+const ENABLE_CUSTOM_SCROLLING_BEHAVIOUR = false;
+
+
 let heroTitle;
 let heroImage;
 let aboutSection;
@@ -32,9 +35,11 @@ window.addEventListener('load', () => {
 
     calculateSidePadding();
     calculateHeroTitleSize();
+    calculateContentOverlap();
 });
 
 window.addEventListener('resize', calculateSidePadding);
+window.addEventListener('resize', calculateContentOverlap);
 
 
 function calculateSidePadding() {
@@ -48,6 +53,11 @@ function calculateSidePadding() {
     root.style.setProperty('--side-padding', `${halfExcess}px`);
 }
 
+function calculateContentOverlap() {
+    let panelWidth = panel.getBoundingClientRect().width;
+    mainContent.style.paddingLeft = `${panelWidth}px`;
+}
+
 
 function calculateHeroTitleSize() {
     let aboutSectionTop = aboutSection.getBoundingClientRect().top;
@@ -89,7 +99,7 @@ function calculateHeroTitleSize() {
         // fade.style.height = (lerp > 0.999) ? '0' : 'auto';
         fade.style.maxHeight = (lerp > 0.999) ? '0' : '10rem';
     });
-    
+
     // lerp the panelContent gap between 0 when lerp is 1 and 1rem when lerp is 0
     panelContent.style.gap = `${1 - lerp}rem`;
 
@@ -132,12 +142,24 @@ function calculateProjectCardExpansion(offset) {
 
 
 
-// Add event listener for mousewheel event on body or left element
-document.addEventListener('mousewheel', handleScroll, { passive: false });
-// Add event listeners for touch events
-document.addEventListener('touchstart', handleTouchStart, { passive: false });
-document.addEventListener('touchmove', handleTouchMove, { passive: false });
+if (ENABLE_CUSTOM_SCROLLING_BEHAVIOUR) {
 
+    // Add event listener for mousewheel event on body or left element
+    document.addEventListener('mousewheel', handleScroll, { passive: false });
+    // Add event listeners for touch events
+    document.addEventListener('touchstart', handleTouchStart, { passive: false });
+    document.addEventListener('touchmove', handleTouchMove, { passive: false });
+
+}
+else {
+    document.addEventListener('mousewheel', (event) => {
+        // Calculate scrolling offset
+        const scrollOffset = event.deltaY;
+        calculateProjectCardExpansion(scrollOffset);
+
+    }, { passive: true });
+
+}
 
 let lastTouchY = 0;
 

scss/pages/_index.scss

@@ -22,6 +22,10 @@ body {
     height: 100vh;
     width: auto;
 
+    z-index: 100;
+
+    pointer-events: none;
+
     > .content {
         display: flex;
         flex-direction: column;
@@ -32,6 +36,11 @@ body {
         margin-bottom: 10rem;
         margin-left: var(--side-padding);
 
+        a {
+            // Required to make the links clickable (as pointer-events is none for #panel)
+            pointer-events: auto;
+        }
+
         .title {
             white-space: nowrap;
 
@@ -74,8 +83,14 @@ body {
     width: 100%;
     min-height: 100vh;
 
+    z-index: 10;
+
+    position: absolute;
+    inset: 0 0 0 0;
+
+
     overflow-y: auto;
-    // scroll-behavior: smooth;
+    scroll-behavior: smooth; // TODO: fix smooth scrolling
 }
 
 section,