Javascript 当向上滚动显示密码输入时，如何防止Ionic view向下反弹？

我正在使用Ionic框架构建一个移动iOS应用程序。我的登录视图如下所示：

第二个输入，密码输入被键盘隐藏了一半，但当我向上滚动以显示第二个输入并放开时，视图会反弹回其原始状态，仍然遮挡第二个输入

这是中间状态（按住me并向上滚动）

我可以单击以选择第二个输入，但体验并不友好

我想：

• 允许用户向上滚动并保持滚动位置而不反弹，以便他们可以选择第二个输入
• 或者选择第一个输入后，向上移动视图，使键盘位于第二个输入的下方，从而使其易于访问

下面是我的login.html模板的标记

<ion-view view-title="Login" ng-controller="LoginCtrl as login">
    <ion-content>
        <div class="splash">
            <div class="x-splash" ng-click="login.xSplash()"></div>

            <header>
                <h1><div class="logo"></div></h1>
                <h2>All change is detectable.</h2>
            </header>

            <div class="divider"><hr></div>

            <section class="login-form">
                <form name="loginForm" ng-submit="login.login(credentials)" novalidate>

                    <div class="login-alert" ng-class="{ hideLoginMsg: login.hideMessage == true }">{{ login.message }}</div>

                    <input type="text"
                           id="username"
                           placeholder="Username"
                           name="username"
                           ng-model="credentials.username">

                    <input type="password"
                           id="password"
                           placeholder="Password"
                           name="password"
                           ng-model="credentials.password">

                    <button type="submit" class="btn-green">Login &raquo;</button>
                </form>

            </section>

            <p class="small-p">
                <a href="#">Forgot your password?</a>
            </p>
        </div>
    </ion-content>
</ion-view>

和

.view容器

类：

.view-container {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
}

---

好的，我就是这样解决的

我没有找到默认的解决方案，所以我不得不使用ng focus和ng类来更改样式，以便用户可以轻松访问第二个输入

<input type="text"
       id="username"
       placeholder="Username"
       name="username"
       ng-focus="login.loginFocused()"
       ng-model="credentials.username">

CSS

加价

<ion-view view-title="Login" ng-controller="LoginCtrl as login" has-bouncing="false">
    <ion-content>
        <div class="splash"
             ng-click="login.splashClick()"
             ng-class="{ 'splash-up'      : login.inputFocused,
                         'splash-default' : login.inputFocused == false }">

function loginFocused() {
    vm.inputFocused = true;
}

.splash-up {
    position: absolute !important;
    top: -40px !important;
}

<ion-view view-title="Login" ng-controller="LoginCtrl as login" has-bouncing="false">
    <ion-content>
        <div class="splash"
             ng-click="login.splashClick()"
             ng-class="{ 'splash-up'      : login.inputFocused,
                         'splash-default' : login.inputFocused == false }">