主页 / user-699969

Artem Zhyto's questions

Martin Hope
Artem Zhyto
Asked: 2025-04-05 04:33:02 +0000 UTC
  • 5

我遇到了一个问题——当我更新网站上的页面时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

如果需要的话，我会提供项目的其他部分。

提前感谢您的帮助！

веб-программирование