输入元素不滚动答案

【问题标题】：Input elements not scrolling输入元素不滚动
【发布时间】：2017-08-30 12:58:59
【问题描述】：

Ionic 2 输入元素在显示键盘时不会滚动到顶部。我已经尝试了所有可以在谷歌上找到的东西。确保键盘禁用滚动不正确。但仍然无法弄清楚是什么让滚动不起作用。任何意见将是有益的。谢谢。

代码：

<ion-header>
  <ion-navbar color="header">
    <ion-title>Billing Info</ion-title>
  </ion-navbar>
</ion-header>
<ion-content>
  <ion-list style="padding: 10px 15% 10px 15%">
    <ion-item *ngFor="let item of cart.Food">
      {{item.Food}}
      <div item-right>₹ {{item.Qty*item.Price}}</div>
    </ion-item>
  </ion-list>
  <ion-item (click)="toggleGroup(i)" style="padding: 10px 15% 10px 15%; font-size: large">
    Net Total
    <div item-right>₹ 150
      <ion-icon color="success" [name]="isGroupShown(i) ? 'arrow-dropdown' : 'arrow-dropright'"></ion-icon>
    </div>
  </ion-item>
  <ion-list *ngIf="isGroupShown(i)" style="padding: 10px 15% 10px 15%" [ngClass]="{active: isGroupShown(i)}">
    <ion-item>
      Bill Amount
      <div item-right>₹ 150</div>
    </ion-item>
    ...
  </ion-list>
  <ion-item style="padding: 10px 15% 10px 15%">
    <ion-label>Discounts</ion-label>
    <ion-checkbox item-right color="secondary" [(ngModel)]="discount" checked="false"></ion-checkbox>
  </ion-item>
  <ion-grid style="padding: 10px 15% 10px 15%; background-color: #f0e68c" radio-group [(ngModel)]="type">
    <ion-row>
      <ion-col col-6>
        <ion-item>
          <ion-label>Percentage</ion-label>
          <ion-radio value="percentage" checked item-right></ion-radio>
        </ion-item>
      </ion-col>
      <ion-col col-6>
        <ion-item>
          <ion-label>Amount</ion-label>
          <ion-radio value="amount"></ion-radio>
        </ion-item>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col col-12>
        <ion-list>
          <ion-item>
            <ion-label floating>Unit</ion-label>
            <ion-input type="text"></ion-input>
          </ion-item>
          <ion-item>
            <ion-label floating>Reason</ion-label>
            <ion-textarea rows="5"></ion-textarea>
          </ion-item>
        </ion-list>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col col-12>
        <button ion-button>Apply</button>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>
<ion-footer text-center>
  <ion-toolbar position="bottom">
    <button ion-button color="cart" round large outline>BILL</button>
  </ion-toolbar>
</ion-footer>

截图：

【问题讨论】：

标签： javascript html css typescript ionic2

【解决方案1】：

ionic forum 上有此类问题的主题。你读了吗？

有类似的解决方法：

使用常规 <input type="text"> 而不是 <ion-input type="text">
使用一些自定义指令将元素“附加”到键盘：https://gist.github.com/Manduro/bc121fd39f21558df2a952b39e907754

【讨论】：