Ionic登录模态框在6英寸以下小屏需滚动显示关闭按钮如何禁止滚动

我的登录界面基于gihan667开源的ionic-login-ui项目实现。

登录页模板代码：

<ion-content class="ion-padding" mode="ios">
    <div class="title">
      <h4>Login</h4>
      <p>Lets get started</p>
    </div>
  
    <form [formGroup]="credentials">
      <ion-list lines="none">
        
        <ion-item>
        <ion-input placeholder="Username" formControlName="userName" class="primary-input"></ion-input>
        </ion-item>

        <ion-item>
        
          <ion-input [type]="showPsw===true ? 'text': 'password'"  placeholder="Password" formControlName="password" autocomplete="off"  class="primary-input"> 
          </ion-input>
          

      </ion-item>
     
      </ion-list>
        
      <ion-button expand="block" (click)="!isSubmitted && login()" >LOGIN</ion-button>
      
    <div class="ion-margin-top ion-text-center"> <a (click)="dismiss()">Close</a>
      
    </div>
  </form>
  
  </ion-content>

登录页SCSS代码：

.title {
  margin-bottom: 15px;
}

.title h4 {
  color: var(--ion-color-primary);
}

.title p {
  margin-top: 0 !important;
  color: #999999;
  font-size: small;
}

.forget a {
  font-size: small !important;
}


ion-item {
  margin-bottom: 6px;
  background: transparent;
  border: 1px solid #eac402;
  --highlight-height: 0px;
  --highlight-color-valid: #eac402;
  --highlight-color-focused: #eac402;
  --highlight-color-invalid: #eac402;
}

global.scss全局样式代码：

.login-modal .modal-wrapper {
    height: 45%;
    top: 55%;
    position: absolute;
    display: block;
    border-radius: 20px 20px 0 0;
}

模态框调用逻辑代码：
欢迎页点击登录按钮后会以模态框形式加载登录页，相关代码如下：

<ion-button expand="block" class="ion-margin-top" (click)="login()"  color="white">LOGIN</ion-button>

constructor(
  public modalCtrl: ModalController,public authService:AuthenticationService
) { }

async login() {
      const modal = await this.modalCtrl.create({
        component: LoginPage,
        animated: true,
        mode: 'ios',         
        cssClass: 'login-modal',
      })
  
      return await modal.present();
    }

上述登录页面以模态框形式展示，所有大屏设备上均显示正常。但在尺寸小于6英寸的小屏设备上，关闭按钮需要滚动页面才能显示，需要实现禁止小屏设备上的页面滚动。

这个问题是写死的模态框高度和ion-content默认滚动逻辑共同导致的，小屏设备视口高度不足时，45%的固定高度装不下所有表单内容，就会触发ion-content的滚动。按以下步骤修改即可：

1. 直接给登录页的ion-content标签添加scrollY="false"属性，强制禁用滚动：

<ion-content class="ion-padding" mode="ios" scrollY="false">

2. 替换global.scss里的模态框样式，增加小屏适配的媒体查询，用动态高度替代固定高度，确保内容能完全展示：

.login-modal .modal-wrapper {
    height: 45%;
    top: 55%;
    position: absolute;
    display: block;
    border-radius: 20px 20px 0 0;
}
/* 适配小屏设备 */
@media (max-height: 700px) {
    .login-modal .modal-wrapper {
        height: auto;
        min-height: 40%;
        max-height: 60%;
        top: unset;
        bottom: 0;
    }
}

3. 如果还有内容溢出的情况，可以给登录页的form增加flex布局，让内容自动适配容器高度：

form {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    padding-bottom: 12px;
}

修改完成后小屏设备上模态框会自动适配高度，不会出现滚动条，关闭按钮默认展示在可视区域。

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