mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
Zack TannerandGitHub
36bff1060e
This removes the env gate that opted into old behavior. Without explicitly setting `scroll-behavior: 'smooth'` on the document, Next.js will not attempt to programmatically disable smooth scrolling when performing certain router events. This is a performance optimization in all cases that do not care about smooth scroll.
44 lines
1.4 KiB
Plaintext
44 lines
1.4 KiB
Plaintext
---
|
|
title: 'Missing data-scroll-behavior Attribute for Smooth Scroll'
|
|
---
|
|
|
|
## Why This Warning Occurred
|
|
|
|
Your application has smooth scrolling enabled via CSS (`scroll-behavior: smooth`), but you haven't added the `data-scroll-behavior="smooth"` attribute to your `<html>` element.
|
|
|
|
Next.js automatically attempts to detect the smooth scrolling configuration to ensure that navigating back/forward through the router doesn't also trigger the smooth scrolling behavior, as this is often not desired.
|
|
|
|
## Possible Ways to Fix It
|
|
|
|
Add `data-scroll-behavior="smooth"` to your `<html>` element if you want to disable smooth scrolling when routing via Next.js.
|
|
|
|
```html filename="app/layout.tsx"
|
|
export default function RootLayout({ children, }: { children: React.ReactNode })
|
|
{ return (
|
|
<html lang="en" data-scroll-behavior="smooth">
|
|
<body>
|
|
{children}
|
|
</body>
|
|
</html>
|
|
) }
|
|
```
|
|
|
|
Or if you're using the Pages Router:
|
|
|
|
```html filename="pages/_document.tsx"
|
|
import { Html, Head, Main, NextScript } from 'next/document' export default
|
|
function Document() { return (
|
|
<html lang="en" data-scroll-behavior="smooth">
|
|
<head />
|
|
<body>
|
|
<main />
|
|
<NextScript />
|
|
</body>
|
|
</html>
|
|
) }
|
|
```
|
|
|
|
## Why This Optimization Matters
|
|
|
|
Next.js will only attempt to modify the `scroll-behavior` style on the `<html>` element when the data attribute is present to ensure smooth scrolling isn't triggered. This avoids unnecessary style recalculation unless explicitly opted into.
|