Ionic3 - 如何避免在单个 html 项目上滚动？答案

【问题标题】：Ionic3 - How do avoid scrolling on a single html item?Ionic3 - 如何避免在单个 html 项目上滚动？
【发布时间】：2018-02-25 07:00:14
【问题描述】：

我有一个显示照片的简单全屏页面，您可以输入标题。我遇到的麻烦是当我专注于输入框时，页面滚动并删除了一半的图像。

<ion-content fullscreen [ngClass]="{'focus': focus, 'focus-out': !focus}" class="focus" [ngStyle]="{'background-image': 'url(' + image + ')'}" no-border>
    <div class="gradient"></div>
</ion-content>

<ion-footer>
    <ion-toolbar color="transparent">
        <ion-grid>
            <ion-row>
                <ion-col col-10>
                    <image-caption (caption)="saveCaption($event)" (focusIn)="focus = true" (focusOut)="focus = false"></image-caption>
                </ion-col>
            </ion-row>
        </ion-grid>
    </ion-toolbar>
</ion-footer>

我希望 ion-content 不滚动，但文本框（在 image-caption 组件内部）在聚焦时出现。我在ion-content 中尝试过no-scroll 和no-bounce。我也试过原生键盘方法来禁用滚动this.keyboard.disableScroll(true);

我可以禁用一个项目的滚动吗？我在这里看到的另一个解决方案是禁用滚动并更改输入框的位置以显示键盘何时显示。

【问题讨论】：

你是在为安卓构建吗？
能否请您添加该问题的 gif 图像？因为有几个与键盘有关的问题，而且也有几种方法可以解决它...
这是在iOS上，从未在android上尝试过。
无法在此处回复 gif，但我想要的是 ion-content 中的背景图像不滚动，因此它完全显示在设备上，但 ion-footer（仅包含一个输入框) 以始终在设备上显示键盘时显示。

标签： ionic-framework ionic3

【解决方案1】：

最终使用变换来缩放图像，但问题似乎已解决。

【讨论】：