如何仅移除网站首页的滚动条而保留其他页面滚动条？

嘿，这个需求其实挺常见的，直接全局设置html { overflow-y: hidden; }肯定不行——那样所有页面的滚动条都没了。我给你分享几种精准控制的方法，按需选就行：

方法1：给首页添加专属类名（最通用的方案） #

核心思路是给首页的根元素（html或body）加一个唯一类名，然后通过CSS只针对这个类隐藏滚动条。

步骤： #

1. 在首页的html或body标签上添加专属类，比如.home-page：

<!-- 首页的html标签示例 -->
<html class="home-page">
<!-- 或者给body加类 -->
<body class="home-page">

其他页面的根元素不要加这个类。

2. 编写针对性的CSS：

/* 仅对首页隐藏垂直滚动条 */
html.home-page {
  overflow-y: hidden;
}

/* 如果是给body加类，就写成 */
body.home-page {
  overflow-y: hidden;
}

方法2：服务器/模板引擎动态添加类（后端渲染场景） #

如果你的网站是后端渲染（比如用PHP、Node.js模板、Jinja2等），可以直接在模板里判断当前是否是首页，动态给根元素加类：

<!-- PHP示例：判断当前是否是首页，添加类名 -->
<html class="<?php echo ($_SERVER['REQUEST_URI'] === '/') ? 'home-page' : ''; ?>">

这样后端会自动给首页加上类，其他页面则不会，CSS写法和方法1一致。

方法3：单页应用（SPA）动态控制（React/Vue等） #

如果是React、Vue这类单页应用，可以通过路由判断当前是否是首页，动态修改样式或添加类：

React示例（用React Router）： #

import { useLocation, useEffect } from 'react-router-dom';

function App() {
  const location = useLocation();
  const isHomePage = location.pathname === '/';

  // 动态控制html的滚动条样式
  useEffect(() => {
    const htmlEl = document.documentElement;
    if (isHomePage) {
      htmlEl.style.overflowY = 'hidden';
    } else {
      // 恢复默认样式，避免影响其他页面
      htmlEl.style.overflowY = '';
    }
  }, [isHomePage]);

  return (
    <div>
      {/* 你的应用内容 */}
    </div>
  );
}

Vue示例： #

<template>
  <div>
    <!-- 你的应用内容 -->
  </div>
</template>

<script>
export default {
  watch: {
    '$route.path'(newPath) {
      const htmlEl = document.documentElement;
      if (newPath === '/') {
        htmlEl.style.overflowY = 'hidden';
      } else {
        htmlEl.style.overflowY = '';
      }
    }
  },
  mounted() {
    // 页面初始化时判断一次
    const htmlEl = document.documentElement;
    if (this.$route.path === '/') {
      htmlEl.style.overflowY = 'hidden';
    }
  }
}
</script>

重要提醒 #

如果首页的内容实际高度超过了视口，隐藏滚动条后用户将无法查看超出的内容！所以要确保首页的内容刚好适配视口高度，比如给首页容器设置min-height: 100vh，同时避免内容溢出。

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