Angular应用在iPad/iPhone上如何阻止页面滚动？

主页面导航栏搭配背景元素设置为100vh后，常规设备显示正常，但iPad/iPhone上仍能滚动，可通过以下几种方法解决：

方法一：全局CSS锁定滚动 #

直接给html和body设置溢出隐藏，同时确保高度占满：

html, body {
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

同时将.page的height: 100vh改为height: 100%，避免iOS下100vh因状态栏/导航栏导致的高度偏差。如果需要适配不同设备的视口高度，也可以用100dvh替代100vh，它会自动适配系统UI占用的空间。

方法二：组件内监听触摸事件阻止滚动 #

在主页面组件中，针对目标元素监听touchmove事件并阻止默认行为：

import { Component, ElementRef, ViewChild, OnInit } from '@angular/core';

@Component({
  selector: 'app-main-page',
  templateUrl: './main-page.html',
  styleUrls: ['./main-page.scss']
})
export class MainPageComponent implements OnInit {
  @ViewChild('scrollTarget') scrollTarget!: ElementRef;

  ngOnInit(): void {
    this.lockIOSScroll();
  }

  private lockIOSScroll(): void {
    const targetEl = this.scrollTarget.nativeElement;
    targetEl.addEventListener('touchmove', (e: TouchEvent) => {
      e.preventDefault();
    }, { passive: false });
  }
}

注意必须设置{ passive: false }，因为iOS默认touchmove事件是被动监听，无法直接阻止默认行为。

方法三：优化viewport适配 #

在项目根目录的index.html中，调整viewport meta标签，确保页面完全适配iOS设备屏幕：

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

viewport-fit=cover会让页面延伸到屏幕的所有区域，包括刘海、底部安全区，避免因系统UI导致的额外滚动空间。

如果之前尝试的滚动锁定npm包无效，大概率是没有针对iOS的触摸事件特性做适配，以上方法更直接针对iOS的滚动行为问题。

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