Сдвиг скролла вверх при обновлении страницы сайта на Next.JS

Question

Столкнулся с проблемой - при обновлении страницы своего сайта на Next.JS, скролл чуть двигает пользователя вверх. То есть, если достаточно много раз нажать F5, то можно долистать до начала страницы.

Отключал все стили, все лишние компоненты, пробовал отключить кэш, пробовал в разных браузерах, пробовал переустанавливать все зависимости - ничего из этого не помогло.

Если нужно, то в проекте используются следующие зависимости:

  "dependencies": {
    "@reduxjs/toolkit": "^2.6.1",
    "@tailwindcss/postcss": "^4.1.2",
    "next": "^15.2.4",
    "postcss": "^8.5.3",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-redux": "^9.2.0",
    "sass": "^1.86.0",
    "tailwindcss": "^3.4.17"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "autoprefixer": "^10.4.21",
    "typescript": "^5"
  }

Так же предоставляю код главного layout:

//@ Styles
import "@styles/globals.scss"

//@ Components
import Panel from "@components-layouts/Panel"
import Footer from "@components-layouts/Footer"

//@ Modules
import metadataFile from "@config/metadata"
import { RootLayoutInterface } from "@typescript-interfaces/layout"

export const metadata = metadataFile

const RootLayout: React.FC<RootLayoutInterface> = ({ children }) => {
    return (
    <html lang="ua">
      <body>
                <div className="contentBlock">
                    <Panel/>
                    <div className="bg-white_cl MainBlock">{children}</div>
                </div>
                <Footer/>
            </body>
    </html>
  )
}

export default RootLayout

И общие стили globals.scss:

@use "./variables.scss" as vars;

@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
    font-family: "Plus Jakarta Sans";
    src: url("../assets/fonts/PlusJakartaSans-VF.ttf");
}

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6, a {
    width: max-content;
    font-family: "Plus Jakarta Sans";
    font-variant-ligatures: none;

    color: vars.$d-green !important; 
}

html {
    height: 100%;
    background-color: vars.$dark-cl;
}

body {
    width: 100%;
    height: 100%;
    background-color: vars.$beige;

    display: flex;
    flex-direction: column;
    align-items: end;
    
    min-height: max-content;

    padding: 55px 5%;
}

.contentBlock {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: start;
    gap: 20px;

    margin-bottom: 55px;

  width: 100%;
}

.MainBlock {
    display: flex;
    justify-content: center;

    position: relative;

    min-height: 221px;
    height: auto;
    width: 100%;

    padding: 50px;

    border-radius: 25px;

    box-shadow: vars.$block-shadow;
}





@media screen and (max-height: 320), screen and (max-width: 600px) {
    .contentBlock {
        flex-direction: column;

        width: 100%;
    }
}

Убрав все стили и лишние компоненты:

//@ Modules
import { RootLayoutInterface } from "@typescript-interfaces/layout"

const RootLayout: React.FC<RootLayoutInterface> = ({ children }) => {
    return (
    <html lang="ua">
      <body>
                <div className="contentBlock">
                    <div className="bg-white_cl MainBlock">{children}</div>
                </div>
            </body>
    </html>
  )
}

export default RootLayout

Проблема сохраняется, но уже не так сильно происходит сдвиг, как с полным кодом. Как я понимаю, мои компоненты и стили просто усиливают этот эффект и дело или с самим Next.JS или с layout.tsx

При необходимости предоставлю другие части проекта.

Заранее благодарю за помощь!

Answer 1

тут может быть несколько причин такой проблемы, напишу о тех с которыми был опыт.

html, body, height: 100% + нестабильный контент у Вас

html {
  height: 100%;
}

body {
  height: 100%;
  min-height: max-content;
}

можно попробовать

html, body {
  height: auto;
  min-height: 100%;
}

@font-face и сдвиг при подгрузке шрифта Вы используете кастомный шрифт (Plus Jakarta Sans) — и это частая причина скачка контента при загрузке, особенно если SSR + FOUT (flash of unstyled text).

можно попробовать добавить font-display: swap;:

@font-face {
    font-family: "Plus Jakarta Sans";
    src: url("../assets/fonts/PlusJakartaSans-VF.ttf");
    font-display: swap;
}

Answer 2

Решение: Есть чудесное свойство overflow-anchor: none;- оно убирает ВСЕ сдвиги при загрузке контента. Я поставил его в блок с *, что бы это свойство применялось ко всему:

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;

    overflow-anchor: none;
}

Так же я сделал padding: 55px 5% как для body, так и для html, а так же height: max-content;, что бы padding был и снизу и сверху:

html, body {
    height: max-content;
    padding: 55px 5%;
}

Ещё был оптимизировал шрифт

Благодарю всем за помощь!

БЛОГ НА HUSL

Сдвиг скролла вверх при обновлении страницы сайта на Next.JS

Ответы (2 шт):