fix: improve mobile scroll performance and accessibility
Remove global smooth scroll (caused laggy feel), use solid header bg on mobile instead of backdrop-blur, respect prefers-reduced-motion, and add targeted smooth scroll only for anchor nav clicks. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -8,6 +8,7 @@ import type { ComponentProps } from "react";
|
|||||||
type TurboLinkProps = ComponentProps<typeof Link>;
|
type TurboLinkProps = ComponentProps<typeof Link>;
|
||||||
|
|
||||||
export const TurboLink = ({
|
export const TurboLink = ({
|
||||||
|
onClick,
|
||||||
onMouseEnter,
|
onMouseEnter,
|
||||||
onPointerEnter,
|
onPointerEnter,
|
||||||
onTouchStart,
|
onTouchStart,
|
||||||
@@ -25,10 +26,26 @@ export const TurboLink = ({
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
|
||||||
|
onClick?.(e);
|
||||||
|
if (e.defaultPrevented) return;
|
||||||
|
|
||||||
|
const hash = strHref?.split("#")[1];
|
||||||
|
if (hash) {
|
||||||
|
const el = document.getElementById(hash);
|
||||||
|
if (el) {
|
||||||
|
e.preventDefault();
|
||||||
|
el.scrollIntoView({ behavior: "smooth" });
|
||||||
|
window.history.pushState(null, "", `#${hash}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Link
|
<Link
|
||||||
{...props}
|
{...props}
|
||||||
prefetch={false}
|
prefetch={false}
|
||||||
|
onClick={handleClick}
|
||||||
onMouseEnter={(e) => {
|
onMouseEnter={(e) => {
|
||||||
conditionalPrefetch();
|
conditionalPrefetch();
|
||||||
onMouseEnter?.(e);
|
onMouseEnter?.(e);
|
||||||
|
|||||||
@@ -35,7 +35,7 @@ export const Header = () => {
|
|||||||
const { t } = useTranslation("marketing");
|
const { t } = useTranslation("marketing");
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<header className="bg-background/80 sticky inset-0 top-[var(--banner-height)] z-40 w-full py-3 backdrop-blur-sm">
|
<header className="bg-background sticky top-[var(--banner-height)] z-40 w-full py-3 lg:bg-background/80 lg:backdrop-blur-sm">
|
||||||
<div className="flex items-center justify-between px-6 pr-4 sm:container">
|
<div className="flex items-center justify-between px-6 pr-4 sm:container">
|
||||||
<TurboLink
|
<TurboLink
|
||||||
href={pathsConfig.index}
|
href={pathsConfig.index}
|
||||||
|
|||||||
@@ -87,11 +87,22 @@
|
|||||||
@layer base {
|
@layer base {
|
||||||
* {
|
* {
|
||||||
@apply border-border outline-ring/50;
|
@apply border-border outline-ring/50;
|
||||||
overscroll-behavior: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
scroll-behavior: smooth;
|
overscroll-behavior: none;
|
||||||
|
scroll-behavior: auto;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
animation-duration: 0.01ms !important;
|
||||||
|
animation-iteration-count: 1 !important;
|
||||||
|
transition-duration: 0.01ms !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
|||||||
Reference in New Issue
Block a user