Angular滚动时Div高度动态变化卡顿问题求解决方案

一、纯CSS实现（性能最优） #

现代浏览器支持滚动驱动动画（Scroll-Driven Animations），完全无需JS即可实现流畅的滚动联动效果，从根源避免JS监听带来的卡顿问题。

核心思路是利用CSS animation 结合滚动进度作为时间线，直接将元素样式绑定到滚动位置：

/* 定义尺寸变化的关键帧 */
@keyframes resize-div {
  0% { height: 400px; }
  100% { height: 100px; }
}

.target-div {
  /* 绑定动画到视口垂直滚动进度 */
  animation: resize-div linear;
  animation-timeline: scroll(root block);
  /* 可选：限定动画触发的滚动区间 */
  animation-range: 0 500px;
}

该方案由浏览器原生处理动画帧，优先级高，不会受JS线程阻塞影响，复杂应用中也能保持流畅。

二、Angular中优化JS监听的方案 #

若需兼容不支持滚动驱动动画的旧浏览器，可对现有HostListener方案做以下优化：

• 用requestAnimationFrame包裹样式修改：确保样式变更在浏览器重绘前执行，避免延迟：

  @HostListener('window:scroll', ['$event'], { passive: true })
  onScroll(event: Event) {
    window.requestAnimationFrame(() => {
      const scrollTop = window.scrollY;
      this.divHeight = 400 - (scrollTop / 5);
    });
  }
  

• 启用passive事件监听：告知浏览器该滚动事件不会调用preventDefault()，减少浏览器阻塞判断：

  @HostListener('window:scroll', ['$event'], { passive: true })
  

• 脱离Angular变更检测：滚动事件无需触发Angular变更检测，用NgZone.runOutsideAngular包裹以降低性能开销：

  constructor(private ngZone: NgZone) {}
  
  ngOnInit() {
    this.ngZone.runOutsideAngular(() => {
      window.addEventListener('scroll', this.onScroll.bind(this), { passive: true });
    });
  }
  
  ngOnDestroy() {
    window.removeEventListener('scroll', this.onScroll.bind(this));
  }
  
  private onScroll() {
    window.requestAnimationFrame(() => {
      const scrollTop = window.scrollY;
      document.querySelector('.target-div')?.style.height = `${400 - (scrollTop / 5)}px`;
    });
  }
  

三、使用专业滚动动画库 #

如果需要复杂的滚动联动逻辑，推荐用GSAP ScrollTrigger：

• 内置节流、硬件加速、动画帧优化等性能处理；
• 集成Angular简单，无需手动维护滚动监听与样式同步；
• 支持滚动到指定位置触发动画、多属性绑定滚动进度等复杂场景。

示例用法：

import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

ngAfterViewInit() {
  gsap.to('.target-div', {
    height: '100px',
    scrollTrigger: {
      trigger: '.target-div',
      start: 'top top',
      end: 'bottom top',
      scrub: true, // 让动画与滚动进度实时同步
    }
  });
}

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