Ionic技术问题：如何实现聚焦<input>时避免页面滚动？

我之前也碰到过这个需求，刚好有两个完全不用CSS技巧的方案，都是利用Ionic本身的配置或原生插件来实现，完美满足你“保持页面静止、仅让键盘正常滑入滑出”的要求：

方案一：全局关闭滚动辅助功能 #

如果你的整个APP都不需要输入框聚焦时的自动滚动行为，可以直接在Ionic的全局配置里关闭scrollAssist属性，一步到位：

在app.module.ts中修改IonicModule的初始化配置：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicModule } from '@ionic/angular';

@NgModule({
  imports: [
    BrowserModule,
    IonicModule.forRoot({
      scrollAssist: false, // 彻底关闭输入框聚焦时的滚动辅助
      autoFocusAssist: 'instant' // 可选：保持自动聚焦但不触发滚动，若不需要自动聚焦可设为false
    })
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

这个配置会全局生效，所有输入框聚焦时都不会再自动滚动页面，键盘仍会正常弹出收起。

方案二：针对单个输入框禁用滚动 #

如果只是部分输入框需要这个特性，可以借助Ionic的Keyboard插件来精准控制：

步骤1：安装依赖 #

先安装原生键盘插件：

ionic cordova plugin add cordova-plugin-ionic-keyboard
npm install @ionic-native/keyboard

步骤2：在组件中实现控制逻辑 #

在需要的页面组件里，监听输入框的focus和blur事件，分别禁用和恢复页面滚动：

import { Keyboard } from '@ionic-native/keyboard/ngx';
import { ElementRef, ViewChild } from '@angular/core';
import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.page.html',
  styleUrls: ['./example.page.scss'],
})
export class ExamplePage {
  @ViewChild('targetInput') targetInput: ElementRef;

  constructor(private keyboard: Keyboard) {}

  // 输入框聚焦时禁用页面滚动
  onInputFocus() {
    this.keyboard.disableScroll(true);
  }

  // 输入框失焦时恢复页面滚动
  onInputBlur() {
    this.keyboard.disableScroll(false);
  }
}

步骤3：绑定HTML事件 #

在对应的页面模板中，给目标输入框绑定事件：

<ion-input #targetInput (focus)="onInputFocus()" (blur)="onInputBlur()" placeholder="试试聚焦我"></ion-input>

这样只有这个特定的输入框聚焦时会锁定页面滚动，其他输入框不受影响，键盘依然正常工作。

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