fixed the scroll behavior in the header
This commit is contained in:
@@ -17,3 +17,22 @@ body {
|
|||||||
background-color: var(--background);
|
background-color: var(--background);
|
||||||
color: var(--foreground);
|
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;
|
||||||
|
}
|
||||||
+16
-2
@@ -1,7 +1,10 @@
|
|||||||
import type { Metadata } from "next";
|
import type { Metadata } from "next";
|
||||||
import { Playfair_Display, Inter } from "next/font/google";
|
import { Playfair_Display, Inter } from "next/font/google";
|
||||||
|
|
||||||
import "./globals.css";
|
import "./globals.css";
|
||||||
|
|
||||||
import Header from "@/components/layout/Header";
|
import Header from "@/components/layout/Header";
|
||||||
|
import CustomScrollArea from "@/components/layout/CustomScrollArea";
|
||||||
|
|
||||||
const playfairDisplay = Playfair_Display({
|
const playfairDisplay = Playfair_Display({
|
||||||
variable: "--font-playfair",
|
variable: "--font-playfair",
|
||||||
@@ -24,10 +27,21 @@ export default function RootLayout({
|
|||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
}>) {
|
}>) {
|
||||||
return (
|
return (
|
||||||
<html lang="fr" className={`${playfairDisplay.variable} ${inter.variable} bg-brand-beige m-2.75 overflow-auto antialiased`}>
|
<html lang="fr" className={`${playfairDisplay.variable} ${inter.variable} bg-brand-beige overflow-hidden antialiased`}>
|
||||||
<body className="min-h-screen flex flex-col bg-brand-beige text-brand-brown">
|
|
||||||
|
<body className="h-screen w-screen bg-brand-beige text-brand-brown flex flex-col overflow-hidden">
|
||||||
|
<div className="sticky top-0 z-50 bg-brand-beige w-full px-2.75 pt-2.75">
|
||||||
<Header />
|
<Header />
|
||||||
|
</div>
|
||||||
|
{/* Scrolling bloc */}
|
||||||
|
<CustomScrollArea>
|
||||||
|
|
||||||
|
|
||||||
|
<main className="px-2.75 pb-2.75">
|
||||||
{children}
|
{children}
|
||||||
|
</main>
|
||||||
|
</CustomScrollArea>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -2,7 +2,7 @@ import HeroSection from "@/components/sections/HeroSection";
|
|||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
return (
|
return (
|
||||||
<main className=" bg-brand-beige text-brand-black flex items-center justify-center">
|
<main className=" bg-brand-beige text-brand-black flex flex-col items-center justify-center">
|
||||||
<HeroSection />
|
<HeroSection />
|
||||||
</main>
|
</main>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -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<HTMLDivElement>(null);
|
||||||
|
const [scrollProgress, setScrollProgress] = useState(0);
|
||||||
|
const [needsScroll, setNeedsScroll] = useState(true);
|
||||||
|
|
||||||
|
const handleScroll = (e: UIEvent<HTMLDivElement>) => {
|
||||||
|
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 (
|
||||||
|
<div className="flex-1 relative flex w-full overflow-hidden bg-brand-beige">
|
||||||
|
|
||||||
|
{/* Scroll area */}
|
||||||
|
<div
|
||||||
|
ref={scrollRef}
|
||||||
|
onScroll={handleScroll}
|
||||||
|
// Tailwind V4: hide the scrollbar on Chrome, Safari and Firefox
|
||||||
|
className="flex-1 overflow-y-auto w-full [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]"
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Custom scrollbar */}
|
||||||
|
{needsScroll && (
|
||||||
|
<div className="absolute right-0 top-0 bottom-0 w-2.5 z-100 pointer-events-none">
|
||||||
|
<div
|
||||||
|
className="absolute w-full bg-brand-brown/20 rounded-full transition-all duration-75 ease-out"
|
||||||
|
style={{
|
||||||
|
height: `${thumbHeight}%`,
|
||||||
|
top: `${scrollProgress * (100 - thumbHeight)}%`
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,6 +1,7 @@
|
|||||||
export default function Header() {
|
export default function Header() {
|
||||||
return (
|
return (
|
||||||
<header className="bg-brand-brown text-brand-beige py-6 px-10 flex justify-between items-center rounded-[10px] fixed left-2.75 right-2.75 z-50">
|
<div className="bg-brand-beige min-h-fit fixed left-2.75 right-2.75 z-50 rounded-b-[20px]">
|
||||||
|
<header className="bg-brand-brown text-brand-beige py-6 px-10 flex justify-between items-center rounded-[10px]">
|
||||||
<div className="font-serif text-2xl font-light">M. Guilbert</div>
|
<div className="font-serif text-2xl font-light">M. Guilbert</div>
|
||||||
<nav>
|
<nav>
|
||||||
<ul className="flex gap-8 font-sans text-base font-light">
|
<ul className="flex gap-8 font-sans text-base font-light">
|
||||||
@@ -12,5 +13,7 @@ export default function Header() {
|
|||||||
</nav>
|
</nav>
|
||||||
<div className="font-sans text-base font-light">France</div>
|
<div className="font-sans text-base font-light">France</div>
|
||||||
</header>
|
</header>
|
||||||
|
</div>
|
||||||
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user