Angular 12中嵌入HTML的JavaScript脚本不执行，导航栏滚动显隐功能失效

核心原因排查 #

首先从你的文件命名mainpage.component.html可判断你大概率使用的是Angular框架：Angular出于安全考虑会自动过滤掉组件模板内的<script>标签，这是代码不生效的最主要原因。
如果是普通静态HTML项目，常见失效原因还有：页面内容高度不足无法触发window滚动事件、脚本执行时DOM还未加载完成、实际滚动的容器不是window。

对应修复方案 #

方案1：普通静态HTML项目 #

1. 确保页面内容总高度超过视口高度，可触发window滚动事件
2. 优化脚本逻辑，添加滚动阈值避免微抖动导致导航栏频繁跳转，参考代码如下：

<!-- 将脚本放在body标签闭合前即可 -->
<script type="text/javascript">
    var lastScrollTop = 0;
    // 明确声明navbar变量
    const navbar = document.getElementById("navbar");
    // 滚动阈值，只有滚动距离超过5px才触发导航栏显隐逻辑
    const scrollOffset = 5;
    window.addEventListener("scroll",function(){
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        if(Math.abs(scrollTop - lastScrollTop) < scrollOffset) return;
        if(scrollTop > lastScrollTop){
            navbar.style.top="-80px";
        } else{
            navbar.style.top="0";
        }
        lastScrollTop = scrollTop;
    })    
</script>

方案2：Angular项目 #

不要在组件模板内写script标签，将逻辑写到对应的mainpage.component.ts文件中，在ngAfterViewInit生命周期钩子中绑定滚动事件，参考代码如下：

import { Component, AfterViewInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-mainpage',
  templateUrl: './mainpage.component.html',
  styleUrls: ['./mainpage.component.scss']
})
export class MainpageComponent implements AfterViewInit, OnDestroy {
  private lastScrollTop = 0;
  private readonly scrollOffset = 5;
  private navbar: HTMLElement | null = null;

  ngAfterViewInit(): void {
    // 此时DOM已渲染完成，可以正常获取navbar元素
    this.navbar = document.getElementById('navbar');
    window.addEventListener('scroll', this.handleScroll.bind(this));
  }

  private handleScroll(): void {
    if (!this.navbar) return;
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    // 小于滚动阈值时不执行逻辑，避免抖动
    if (Math.abs(scrollTop - this.lastScrollTop) < this.scrollOffset) return;
    if (scrollTop > this.lastScrollTop) {
      this.navbar.style.top = '-80px';
    } else {
      this.navbar.style.top = '0';
    }
    this.lastScrollTop = scrollTop;
  }

  ngOnDestroy(): void {
    // 组件销毁时移除事件监听，避免内存泄漏
    window.removeEventListener('scroll', this.handleScroll.bind(this));
  }
}

额外排查项 #

如果按照上述方案修改后仍不生效，检查你的SCSS代码中是否给html或body设置了height: 100%、overflow: hidden属性，这类属性会导致window无法触发滚动事件，此时需要找到实际滚动的容器，将滚动事件绑定到对应容器上即可。

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