Angular 12中组件通过*ngIf切换可见性时自定义滚动禁用指令未触发问题排查

核心问题出在你使用的visible事件——浏览器和Angular都没有内置这个事件，所以你的toggleNoScroll方法根本没有被触发，这就是控制台看不到日志、指令失效的原因。

修复方案（针对*ngIf场景） #

因为你是用*ngIf控制元素的添加/移除，最直接的方式是利用指令的生命周期钩子：当*ngIf为true时，指令所在元素被挂载到DOM，ngOnInit会执行；当*ngIf为false时，元素被移除，ngOnDestroy会执行。修改后的指令代码如下：

import { DOCUMENT } from '@angular/common';
import { Directive, Inject, Renderer2, OnInit, OnDestroy } from '@angular/core';

@Directive({ selector: '[appRemoveScroll]' })
export class RemoveScrollDirective implements OnInit, OnDestroy {
  constructor(
    @Inject(DOCUMENT) private document: Document,
    private renderer: Renderer2,
  ) { }

  ngOnInit() {
    console.log("Element is now visible, disabling scroll");
    this.renderer.addClass(this.document.body, 'no-scroll');
  }

  ngOnDestroy() {
    console.log("Element is hidden, re-enabling scroll");
    this.renderer.removeClass(this.document.body, 'no-scroll');
  }
}

额外检查项 #

别忘了确认你的no-scroll CSS类是否正确定义，否则即使添加了类也不会有效果：

.no-scroll {
  overflow: hidden;
  /* 可选：处理iOS上的滚动穿透问题 */
  position: fixed;
  width: 100%;
}

扩展方案（针对CSS显示/隐藏场景） #

如果未来你需要监听通过display: none/visibility: hidden控制的元素可见性，可以使用IntersectionObserver来检测元素是否进入视口。但对于当前*ngIf的场景，上面的生命周期钩子方案是最简洁高效的。

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