app/components/SmoothScroll.tsx

@@ -0,0 +1,116 @@
+import type { JSX } from "solid-js";
+import { createSignal, onCleanup } from "solid-js";
+
+type SmoothScrollProps = JSX.IntrinsicElements["div"] & {
+	children: JSX.Element;
+};
+
+export function SmoothScroll(props: SmoothScrollProps) {
+	const [isScrolling, setIsScrolling] = createSignal(false);
+	let animationFrameId: number | null = null;
+
+	const easeOutQuad = (t: number, b: number, c: number, d: number) => {
+		const time = t / d;
+		return -c * time * (time - 2) + b;
+	};
+
+	const smoothScroll = (deltaY: number) => {
+		const scrollSpeed = 3;
+		const currentScroll = window.scrollY;
+		const targetScroll = deltaY * scrollSpeed;
+		const duration = 300;
+		const startTime = performance.now();
+
+		const animateScroll = (currentTime: number) => {
+			const elapsedTime = currentTime - startTime;
+			const ease = easeOutQuad(
+				elapsedTime,
+				currentScroll,
+				targetScroll,
+				duration,
+			);
+
+			window.scrollTo(0, ease);
+
+			if (elapsedTime < duration) {
+				animationFrameId = requestAnimationFrame(animateScroll);
+			} else {
+				setIsScrolling(false);
+			}
+		};
+
+		animationFrameId = requestAnimationFrame(animateScroll);
+	};
+
+	const isMobile = () => {
+		const regex =
+			/Mobi|Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
+		return regex.test(navigator.userAgent);
+	};
+
+	const isElementScrollable = (element: HTMLElement) => {
+		if (!element) return false;
+
+		return (
+			element.scrollHeight > element.clientHeight && element.tagName !== "HTML"
+		);
+	};
+
+	const findScrollableParent = (element: HTMLElement) => {
+		let currentElement: HTMLElement | null = element;
+
+		while (currentElement) {
+			if (isElementScrollable(currentElement)) {
+				return currentElement;
+			}
+
+			currentElement = currentElement.parentElement;
+		}
+
+		return null;
+	};
+
+	const handleWheel = (event: WheelEvent) => {
+		if (isMobile()) return;
+		if (event.ctrlKey) return;
+		if (event.metaKey) return;
+
+		const hoveredElement = document.elementFromPoint(
+			event.clientX,
+			event.clientY,
+		) as HTMLElement;
+
+		if (findScrollableParent(hoveredElement)) {
+			if (animationFrameId !== null) cancelAnimationFrame(animationFrameId);
+			return;
+		}
+
+		event.preventDefault();
+		event.stopPropagation();
+
+		if (isScrolling()) {
+			if (animationFrameId !== null) {
+				cancelAnimationFrame(animationFrameId);
+			}
+		}
+
+		requestAnimationFrame(() => {
+			smoothScroll(event.deltaY);
+			setIsScrolling(false);
+		});
+
+		setIsScrolling(true);
+	};
+
+	onCleanup(() => {
+		if (animationFrameId !== null) {
+			cancelAnimationFrame(animationFrameId);
+		}
+	});
+
+	return (
+		<div {...props} onWheel={handleWheel} style={{ "touch-action": "auto" }}>
+			{props.children}
+		</div>
+	);
+}

app/layouts/LayoutDefault.tsx

@@ -1,6 +1,7 @@
 import type { JSXElement } from "solid-js";
 
 import { usePageContext } from "vike-solid/usePageContext";
+import { SmoothScroll } from "@/components/SmoothScroll";
 import { HeroSection } from "@/partials/HeroSection";
 import { clientOnly } from "vike-solid/clientOnly";
 import { Navigation } from "@/partials/Navigation";
@@ -11,7 +12,9 @@ import { Toaster } from "solid-toast";
 
 import "./tailwind.css";
 
-const ReadProgressBar = clientOnly(async () => (await import("@/partials/ReadProgressBar")).ReadProgressBar);
+const ReadProgressBar = clientOnly(
+	async () => (await import("@/partials/ReadProgressBar")).ReadProgressBar,
+);
 
 type DefaultLayoutProps = {
 	children: JSXElement;
@@ -22,7 +25,7 @@ export default function DefaultLayout(props: DefaultLayoutProps) {
 
 	return (
 		<>
-      <div class="flex w-full flex-col font-sans">
+			<SmoothScroll class="flex w-full flex-col font-sans">
 				<Header />
 				<ReadProgressBar />
 
@@ -44,7 +47,7 @@ export default function DefaultLayout(props: DefaultLayoutProps) {
 				</div>
 
 				<Footer />
-      </div>
+			</SmoothScroll>
 
 			<Toaster />
 		</>

app/vite.config.ts

@@ -25,20 +25,35 @@ const __dirname = path.resolve();
 export default defineConfig({
 	plugins: [
 		prismjsVitePlugin({
-      languages: ["javascript", "typescript", "tsx", "jsx", "css", "html", "bash", "nginx", "sql"],
+			languages: [
+				"javascript",
+				"typescript",
+				"tsx",
+				"jsx",
+				"css",
+				"html",
+				"bash",
+				"nginx",
+			],
 		}),
 		vike(),
 		vikeSolid(),
 		mdx({
 			jsxImportSource: "solid-jsx",
-      remarkPlugins: [remarkFrontmatter, remarkHeadingId, remarkExtractFrontmatter],
+			remarkPlugins: [
+				remarkFrontmatter,
+				remarkHeadingId,
+				remarkExtractFrontmatter,
+			],
 		}),
 		tailwindcss(),
 		telefunc(),
 	],
 	css: {
 		postcss: {
-      plugins: [...(process.env.NODE_ENV === "production" ? [removeCommentRules] : [])],
+			plugins: [
+				...(process.env.NODE_ENV === "production" ? [removeCommentRules] : []),
+			],
 		},
 	},
 	build: {