如何在Angular中仅对单个页面使用overflow:hidden实现不可滚动？

组件内的CSS无法作用到index.html中的<body>标签，核心原因是组件样式默认带有作用域（比如Vue的scoped、React的CSS Modules），只会对组件内部的DOM元素生效，而<body>属于根级元素，不在组件的DOM范围内，所以你写的.unscrollable样式根本选不到它。

以下是几种靠谱的解决方式：

1. 用JS动态控制body类名（通用方案） #

保留全局的.unscrollable样式（放在index.html的<style>或全局CSS文件里）：

.unscrollable {
    overflow: hidden;
}

然后在目标组件的生命周期中，通过JS给body添加/移除类：

• 组件挂载（进入页面）时添加类：

  document.body.classList.add('unscrollable');
  

• 组件卸载（离开页面）时移除类：

  document.body.classList.remove('unscrollable');
  

框架适配示例 #

• Vue 2/3：在组件的生命周期钩子中处理

  // Vue 3 Composition API
  import { onMounted, onUnmounted } from 'vue';
  
  export default {
    setup() {
      onMounted(() => {
        document.body.classList.add('unscrollable');
      });
      onUnmounted(() => {
        document.body.classList.remove('unscrollable');
      });
    }
  }
  

• React：用useEffect钩子实现自动清理

  import { useEffect } from 'react';
  
  function TargetPage() {
    useEffect(() => {
      document.body.classList.add('unscrollable');
      // 组件卸载时执行清理
      return () => {
        document.body.classList.remove('unscrollable');
      };
    }, []);
  
    return <div>你的页面内容</div>;
  }
  

2. 禁用组件样式作用域（不推荐） #

如果一定要用组件内的CSS控制body，可以去掉组件样式的作用域标记（比如Vue去掉scoped属性），但这种方式会让组件内的所有样式变成全局样式，容易引发样式冲突，除非你能保证.unscrollable类不会被其他地方误用。

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