如何在Angular中检测页面是否可滚动

核心判断逻辑：比较滚动容器的总内容高度scrollHeight和容器可视高度clientHeight，当前者大于后者时说明内容溢出可滚动，显示自定义提示，否则隐藏。
注意：不要直接默认用body做检测，先确认你页面的实际滚动容器——默认无自定义滚动布局时滚动容器是document.documentElement，如果给Stepper外层套了固定高度、overflow: auto的自定义容器，检测时要替换成对应容器节点。

1. 组件类逻辑编写 #

先引入依赖，编写检测方法和事件监听：

import { Component, HostListener, AfterViewInit, ViewChild } from '@angular/core';
import { MatStepper } from '@angular/material/stepper';

@Component({
  selector: 'app-stepper-page',
  templateUrl: './stepper-page.component.html',
  styleUrls: ['./stepper-page.component.css']
})
export class StepperPageComponent implements AfterViewInit {
  // 控制滚动提示显隐
  showScrollHint = false;
  // 获取Stepper实例
  @ViewChild(MatStepper) stepper!: MatStepper;

  // 获取实际滚动容器，自定义滚动容器时替换返回值即可
  private getScrollContainer(): HTMLElement {
    return document.documentElement;
    // 自定义容器示例：return document.querySelector('.stepper-scroll-wrapper') as HTMLElement;
  }

  // 核心检测方法
  private checkScrollStatus() {
    const container = this.getScrollContainer();
    // 加1px容错，抵消浏览器小数像素计算误差
    this.showScrollHint = container.scrollHeight - container.clientHeight > 1;
  }

  ngAfterViewInit() {
    // 视图初始化完成后首次检测
    this.checkScrollStatus();
    // 监听步骤切换，切换后重新检测高度
    this.stepper.selectionChange.subscribe(() => {
      // 延时等DOM更新完成再检测，避免拿到上一步的高度
      setTimeout(() => this.checkScrollStatus(), 0);
    });
  }

  // 监听窗口尺寸变化，重新检测
  @HostListener('window:resize')
  onWindowResize() {
    this.checkScrollStatus();
  }

  // 可选：监听滚动事件，滚动到接近底部时自动隐藏提示
  @HostListener('window:scroll')
  onPageScroll() {
    const container = this.getScrollContainer();
    const reachBottom = container.scrollHeight - container.scrollTop - container.clientHeight < 20;
    this.showScrollHint = !reachBottom && (container.scrollHeight - container.clientHeight > 1);
  }
}

2. 模板添加提示元素 #

在Stepper同层级添加自定义提示节点，不侵入Stepper原有结构：

<mat-stepper #stepper>
  <!-- 原有步骤内容保持不变 -->
  <mat-step label="步骤1">
    <!-- 长内容 -->
  </mat-step>
  <mat-step label="步骤2">
    <!-- 长内容 -->
  </mat-step>
</mat-stepper>

<!-- 自定义向下滚动提示 -->
<div class="scroll-down-hint" *ngIf="showScrollHint">
  <!-- 替换为自己的提示图片/动画资源 -->
  <img src="assets/icons/scroll-arrow.gif" alt="向下滚动查看更多">
</div>

3. 提示样式调整 #

用固定定位把提示放在合适位置，避免遮挡Stepper底部的操作按钮：

.scroll-down-hint {
  position: fixed;
  bottom: 72px; /* 根据自己页面底部按钮高度调整 */
  left: 50%;
  transform: translateX(-50%);
  z-index: 99;
  pointer-events: none; /* 禁止提示拦截点击事件，不影响下方按钮操作 */
  /* 可选：添加上下弹跳动画增强提示感 */
  animation: bounce 1.6s ease-in-out infinite;
}

@keyframes bounce {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(10px);
  }
}

常见踩坑说明 #

• 不要用document.body做高度检测，多数浏览器下body元素的clientHeight计算不符合预期，全局滚动场景优先用document.documentElement
• 步骤切换后的检测必须加微任务延时，Angular的步骤DOM更新是异步的，同步检测会拿到旧的内容高度
• 检测逻辑里加1px容错是必要的，浏览器渲染时经常出现小数级别的高度计算误差，直接判断scrollHeight > clientHeight会出现内容刚好铺满时误显提示的问题
• 如果用了自定义滚动容器，除了替换检测的容器节点，还要把@HostListener绑定的window滚动、resize事件换成对应容器的事件，避免检测不触发

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