在不同滚动条宽度和布局的页面之间切换时布局不一致

Question

我在 React 应用程序中的两个页面之间转换时遇到布局不一致问题。主页采用固定高度的三栏，确保内部内容独立滚动。然而，在排名页面上，也像主页一样有固定的标题，但允许主要内容相对整体滚动，会出现滚动条，导致在这些页面之间切换时，页面宽度会出现轻微的跳跃。

我创建了一个 codesandbox 演示供您参考。这是我的代码结构的简化版本：

应用程序.js

import { Route, Routes } from "react-router";
import { BrowserRouter } from "react-router-dom";
import Home from "./Home";
import Rankings from "./Rankings";
import Header from "./Header";

export default function App() {
  return (
    <BrowserRouter>
      <div className="app-container">
        <Header />
        <Routes>
          <Route path="" element={<Home />} />
          <Route path="/rankings" element={<Rankings />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

Home.js

import { Link } from "react-router-dom";
import "./home.css";
import NewsFeed from "./NewsFeed";

export default function Home() {
  return (
    <div className="main-content">
      <div className="background"></div>
      <div className="grid-container">
        <div className="col-container" style={{ background: "pink" }}>
          <NewsFeed />
        </div>
        <div className="col-container" style={{ background: "orange" }}>
          <NewsFeed />
        </div>
        <div className="col-container" style={{ background: "red" }}>
          <NewsFeed />
        </div>
      </div>
    </div>
  );
}

NewsFeed.js

import { useState, useEffect, useRef } from "react";
import "./newsfeed.css";

function NewsFeed() {
  return (
    <div className="news-feed-container">
      <div className="news-feed-title">News Feed</div>
      <div className="news-items-container">
        <div className="news-item">News Item 1</div>
        <div className="news-item">News Item 2</div>
      </div>
    </div>
  );
}

export default NewsFeed;

Rankings.js

import "./rankings.css";
export default function Rankings() {
  return (
    <div className="rankings-container">
      <div className="rankings-content">
        <div className="heading">
          <nav className="navigation">
            <ul className="menu">
              <li className="menu-item">Currency Ranking</li>
              <li className="menu-item">User Ranking</li>
            </ul>
          </nav>
        </div>

        <div className="flex flex-col">
          <div className="ranking-tables">
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime
              mollitia, molestiae quas vel sint commodi repudiandae consequuntur
              voluptatum laborum numquam blanditiis harum quisquam eius sed odit
              fugiat iusto fuga praesentium optio, eaque rerum! Provident
              similique accusantium nemo autem.
            </p>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime
              mollitia, molestiae quas vel sint commodi repudiandae consequuntur
              voluptatum laborum numquam blanditiis harum quisquam eius sed odit
              fugiat iusto fuga praesentium optio, eaque rerum! Provident
              similique accusantium nemo autem.
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}

根据提供的 NewsFeed 组件代码和 Rankings 组件的布局，我尝试了多种方法，但仍然陷入困境。我探索了调整 CSS 文件中的 CSS 样式，特别是关注排名页面样式。然而，尽管我努力了，问题仍然存在。

我想强调的是，我不想修改我的主要布局，尽管我愿意接受任何可能有助于解决此问题的建议或见解。无论是否存在滚动条，如何确保在这些页面之间转换时布局一致？任何见解或建议将不胜感激。谢谢。

Answer 1

由于滚动条的出现导致布局不一致，因此可以采取两种方法：

强制滚动条可见：即使没有足够的内容可供滚动，滚动条始终可见。这将防止页面之间转换时布局发生变化。

设置 Body Overflow：在 CSS 中将 body 元素的

overflow-y

属性设置为滚动或自动。

基本上，您需要在

index.css

中执行此操作（假设文件名来自您共享的codesandbox）：

body {
  overflow-y: auto; /* Force vertical scrollbar */
}

/* Alternatively, you can use 'auto' */
/*
body {
  overflow-y: scroll; 
}
*/