React页面切换时滚动栏宽度差异致布局跳转问题求助

你的问题核心是：首页内部内容独立滚动，body无滚动条；排行榜页内容随body滚动，出现滚动条，两者切换时滚动条占用的宽度导致页面布局轻微偏移。以下几种方案无需修改主布局即可解决：

方案1：强制body始终显示垂直滚动条 #

给全局body添加CSS样式，让滚动条永久占位：

body {
  overflow-y: scroll;
}

原理：无论页面内容是否超出视口，body都保留滚动条的宽度，切换页面时不会因为滚动条的出现/消失导致布局宽度变化。

方案2：使用scrollbar-gutter属性（现代浏览器推荐） #

利用CSS的scrollbar-gutter为滚动条预留稳定空间，无需强制显示滚动条：

body {
  scrollbar-gutter: stable;
  /* 若需要同时处理水平滚动条，可设置为 scrollbar-gutter: stable both; */
}

原理：该属性会在元素为滚动容器时，预留给滚动条固定宽度，即使滚动条未显示，布局也不会偏移，视觉上更友好，支持Chrome 94+、Firefox 91+、Edge 94+等现代浏览器。

方案3：动态计算滚动条宽度并补偿布局 #

通过JavaScript计算滚动条宽度，在路由切换时为容器添加右侧内边距/外边距来抵消宽度变化：

import { useEffect, useState } from 'react';
import { Route, Routes, useLocation } 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() {
  const location = useLocation();
  const [scrollbarWidth, setScrollbarWidth] = useState(0);

  useEffect(() => {
    // 计算滚动条宽度
    const getScrollbarWidth = () => {
      return window.innerWidth - document.documentElement.clientWidth;
    };

    // 路由切换时重新计算
    setScrollbarWidth(getScrollbarWidth());
    
    // 监听窗口 resize 事件，更新宽度
    const handleResize = () => setScrollbarWidth(getScrollbarWidth());
    window.addEventListener('resize', handleResize);
    
    return () => window.removeEventListener('resize', handleResize);
  }, [location]);

  return (
    <BrowserRouter>
      <div className="app-container" style={{ paddingRight: scrollbarWidth }}>
        <Header />
        <Routes>
          <Route path="" element={<Home />} />
          <Route path="/rankings" element={<Rankings />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

原理：动态获取滚动条宽度，给全局容器添加对应宽度的右侧内边距，确保页面内容的实际可用宽度在有无滚动条时保持一致，兼容性最好，适合需要兼容旧浏览器的场景。

内容的提问来源于stack exchange，提问作者Johar Khan