From bc83366c9e4abba73bc0aa1766636cbac0d3d0da Mon Sep 17 00:00:00 2001 From: Matheo Guilbert Date: Wed, 15 Apr 2026 12:21:31 +0200 Subject: [PATCH] fixed the scroll behavior in the header --- app/[locale]/globals.css | 19 +++++++++ app/[locale]/layout.tsx | 22 ++++++++-- app/[locale]/page.tsx | 2 +- components/layout/CustomScrollArea.tsx | 58 ++++++++++++++++++++++++++ components/layout/Header.tsx | 27 ++++++------ 5 files changed, 111 insertions(+), 17 deletions(-) create mode 100644 components/layout/CustomScrollArea.tsx diff --git a/app/[locale]/globals.css b/app/[locale]/globals.css index a649ac3..69d9950 100644 --- a/app/[locale]/globals.css +++ b/app/[locale]/globals.css @@ -16,4 +16,23 @@ body { background-color: var(--background); color: var(--foreground); +} + +html, +body { + margin: 0; + padding: 0; + width: 100%; + height: 100%; +} + +::-webkit-scrollbar { + display: none; + width: 0px; + background: transparent; +} + +* { + scrollbar-width: none; + -ms-overflow-style: none; } \ No newline at end of file diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx index 94623e5..d0d9399 100644 --- a/app/[locale]/layout.tsx +++ b/app/[locale]/layout.tsx @@ -1,7 +1,10 @@ import type { Metadata } from "next"; import { Playfair_Display, Inter } from "next/font/google"; + import "./globals.css"; + import Header from "@/components/layout/Header"; +import CustomScrollArea from "@/components/layout/CustomScrollArea"; const playfairDisplay = Playfair_Display({ variable: "--font-playfair", @@ -24,10 +27,21 @@ export default function RootLayout({ children: React.ReactNode; }>) { return ( - - -
- {children} + + + +
+
+
+ {/* Scrolling bloc */} + + + +
+ {children} +
+ + ); diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx index 3dd7179..7bf58b7 100644 --- a/app/[locale]/page.tsx +++ b/app/[locale]/page.tsx @@ -2,7 +2,7 @@ import HeroSection from "@/components/sections/HeroSection"; export default function Home() { return ( -
+
); diff --git a/components/layout/CustomScrollArea.tsx b/components/layout/CustomScrollArea.tsx new file mode 100644 index 0000000..c302793 --- /dev/null +++ b/components/layout/CustomScrollArea.tsx @@ -0,0 +1,58 @@ +"use client"; + +import { useRef, useState, UIEvent, useEffect } from "react"; + +export default function CustomScrollArea({ children }: { children: React.ReactNode }) { + // Scroll indicator size (default 20) + const thumbHeight = 20; + + const scrollRef = useRef(null); + const [scrollProgress, setScrollProgress] = useState(0); + const [needsScroll, setNeedsScroll] = useState(true); + + const handleScroll = (e: UIEvent) => { + const target = e.currentTarget; + const maxScroll = target.scrollHeight - target.clientHeight; + + if (maxScroll > 0) { + // 0 : top, 1 : bottom + setScrollProgress(target.scrollTop / maxScroll); + } + }; + + // Check if content is larger than screen on load + useEffect(() => { + if (scrollRef.current) { + setNeedsScroll(scrollRef.current.scrollHeight > scrollRef.current.clientHeight); + } + }, []); + + return ( +
+ + {/* Scroll area */} +
+ {children} +
+ + {/* Custom scrollbar */} + {needsScroll && ( +
+
+
+ )} + +
+ ); +} \ No newline at end of file diff --git a/components/layout/Header.tsx b/components/layout/Header.tsx index 38e1b8e..d05b010 100644 --- a/components/layout/Header.tsx +++ b/components/layout/Header.tsx @@ -1,16 +1,19 @@ export default function Header() { return ( -
-
M. Guilbert
- -
France
-
+
+
+
M. Guilbert
+ +
France
+
+
+ ); } \ No newline at end of file