Website: Fix scrolling behaviour

website/src/components/layout/article/article-layout.tsx

@@ -26,7 +26,7 @@ export function ArticleLayout({
 
   return (
     <TabGroupProvider>
-      <LayoutContainer>
+      <LayoutContainer className="article-layout">
         <ArticleLayoutNavigation>{navigation}</ArticleLayoutNavigation>
         <ArticleWrapper ref={ref}>
           <ArticleContainer>

website/src/components/layout/site/header.tsx

@@ -232,6 +232,7 @@ const Container = styled.header`
   border-bottom: 1px solid ${THEME_COLORS.boxBorder};
   width: 100vw;
   height: 72px;
+  overflow: hidden;
 
   ${ApplyBackdropBlur(48, `background-color: ${THEME_COLORS.backgroundMenu};`)}
 `;

website/src/components/layout/site/main.tsx

@@ -1,4 +1,4 @@
-import React, { FC, PropsWithChildren, useEffect, useRef } from "react";
+import React, { FC, PropsWithChildren, useEffect } from "react";
 import { useDispatch } from "react-redux";
 import styled from "styled-components";
 
@@ -8,7 +8,6 @@ import { Footer } from "./footer";
 import { Header } from "./header";
 
 export const Main: FC<PropsWithChildren<unknown>> = ({ children }) => {
-  const ref = useRef<HTMLDivElement>(null);
   const dispatch = useDispatch();
 
   useEffect(() => {
@@ -19,23 +18,19 @@ export const Main: FC<PropsWithChildren<unknown>> = ({ children }) => {
     );
 
     const handleScroll = () => {
-      if (!ref.current || ref.current.scrollTop === undefined) {
-        return;
-      }
-
       dispatch(
         hasScrolled({
-          yScrollPosition: ref.current.scrollTop,
+          yScrollPosition: window.scrollY,
         })
       );
     };
 
-    ref.current?.addEventListener("scroll", handleScroll, { passive: true });
+    window.addEventListener("scroll", handleScroll, { passive: true });
 
     return () => {
-      ref.current?.removeEventListener("scroll", handleScroll);
+      window.removeEventListener("scroll", handleScroll);
     };
-  }, []);
+  }, [dispatch]);
 
   useEffect(() => {
     const { hash } = window.location;
@@ -48,14 +43,14 @@ export const Main: FC<PropsWithChildren<unknown>> = ({ children }) => {
   });
 
   const scrollToTop = () => {
-    ref.current?.scrollTo({
+    window.scrollTo({
       top: 0,
       behavior: "smooth",
     });
   };
 
   return (
-    <Container ref={ref}>
+    <Container>
       <Header />
       <Content>{children}</Content>
       <Footer />
@@ -68,8 +63,6 @@ const Container = styled.div`
   position: relative;
   display: flex;
   flex-direction: column;
-  height: 100vh;
-  overflow-y: auto;
 `;
 
 const Content = styled.main`
@@ -78,6 +71,11 @@ const Content = styled.main`
   flex-direction: column;
   align-items: center;
   width: 100%;
-  overflow: visible;
   flex: 1 0 auto;
+  overflow-x: hidden;
+
+  /* Reset overflow-x if article-layout is present to fix "position: sticky" */
+  :has(.article-layout) {
+    overflow-x: visible;
+  }
 `;

website/src/components/layout/site/site-layout.tsx

@@ -141,7 +141,7 @@ function Stars(): ReactElement {
     window.addEventListener("resize", () => {
       setCanvasSize();
       initStars();
-    });
+    }, { passive: true });
 
     setCanvasSize();
     initStars();
@@ -152,7 +152,7 @@ function Stars(): ReactElement {
     <canvas
       ref={canvasRef}
       style={{
-        position: "absolute",
+        position: "fixed",
         top: 0,
         right: 0,
         bottom: 0,

website/src/components/misc/page-top.tsx

@@ -37,7 +37,6 @@ export const PageTop: FC<PageTopProps> = ({ onTopScroll }) => {
 };
 
 const JumpToTop = styled.button`
-  display: none;
   position: fixed;
   right: 24px;
   bottom: 24px;
@@ -47,11 +46,12 @@ const JumpToTop = styled.button`
   width: 42px;
   height: 42px;
   background-color: ${THEME_COLORS.text};
-  opacity: 0.6;
-  transition: opacity 0.2s ease-in-out;
-
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
   &.show {
-    display: initial;
+    opacity: 0.6;
+    visibility: visible;
   }
 
   &:hover {

website/src/style/global-style.tsx

@@ -19,23 +19,22 @@ export const GlobalStyle = createGlobalStyle`
   }
 
   html {
-    height: 100vh;
-    overflow: hidden;
     font-family: ${FONT_FAMILY};
     font-size: 16px;
     -webkit-text-size-adjust: 100%;
   }
 
   body {
     margin: 0;
-    overflow: hidden;
+    overflow-x: hidden;
     font-size: 1rem;
     letter-spacing: 0.025rem;
     line-height: 1.6em;
     color: ${THEME_COLORS.text};
     background-image: radial-gradient(ellipse at bottom, #151135 0%, ${THEME_COLORS.background} 40%);
     background-color: ${THEME_COLORS.background};
     background-size: auto;
+    background-attachment: fixed;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 
@@ -96,10 +95,6 @@ export const GlobalStyle = createGlobalStyle`
     outline: none;
   }
 
-  div, span {
-    overflow: hidden;
-  }
-
   a {
     color: ${THEME_COLORS.link};
     text-decoration: none;