css - 苹果移动网络应用程序支持的 Angular UI引导模态滚动问题

我正在处理的一个简单的待办事项列表Web应用程序出现问题。我在用着

<meta name="apple-mobile-web-app-capable" content="yes">

因此，它可以做iPhone独立启动的事情。

我看到的问题是从主屏幕启动应用程序时，我滚动到列表的底部，该列表超出了屏幕底部，并尝试添加项目，模态如下所示：

css - 苹果移动网络应用程序支持的 Angular UI引导模态滚动问题-LMLPHP

它在固定标头div和模式本身顶部的列表顶部显示项目。

index.html看起来像这样：

<!DOCTYPE html>
<html ng-app="app" manifest="app.appcache">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
    <meta name="apple-mobile-web-app-capable" content="yes">

    <script src="js/vendor.js"></script>
    <script src="js/app.js"></script>

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/app.css">
    <link rel="stylesheet" href="css/undo.css">

    <link rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152.png">

    <title>All your lists</title>
</head>
<body>
    <div class="container" ng-view></div>
</body>
</html>

该视图如下所示：

<div class="header">
    <div class="row">
        <div class="col-xs-3" style="text-align: left;">
            <button type="button" class="btn btn-sm btn-primary btn-top" ng-click="home()">
                <span class="glyphicon glyphicon-home"></span>
            </button>
        </div>
        <div class="col-xs-6" style="text-align: center; line-height: 40px; color: #eee">
            <h4>{{list.name}}</h4>
        </div>
        <div class="col-xs-3" style="text-align: right">
            <div class="btn-group" role="group">
                <button type="button" class="btn btn-sm btn-primary btn-top" ng-click="open()">
                    <span class="glyphicon glyphicon-plus"></span>
                </button>
            </div>
        </div>
    </div>
</div>

<ul class="list-group">
    <li class="list-group-item app-item" ng-repeat="item in items | filter: { checked: 'false' }">
        <list-item item="item" toggle="toggleItemCheck" delete="deleteItem"></list-item>
    </li>
    <li class="list-group-item got-item" ng-repeat="item in items | filter: { checked: 'true' }">
        <list-item item="item" toggle="toggleItemCheck" delete="deleteItem"></list-item>
    </li>
</ul>

标头div的CSS为：

.header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 40px;
    background-color: #444;
    padding-left: 5px;
    padding-right: 5px;
}

当我在台式机（在移动视图中）和iPhone上的浏览器中查看Web应用程序时，都没有看到问题-随着模式的下降，它似乎滚动到顶部。

我注意到具有apple-mobile-web-app-appable模式的另一件事是，如果模式出现在列表顶部时，我可以向下滚动并查看模式淡入叠加层的结束位置，从而暴露一些列表项。

最佳答案

我对这个问题不太满意的解决方案是使用

$window.scrollTo(0,0);

在打开模态之前

关于css - 苹果移动网络应用程序支持的 Angular UI引导模态滚动问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39171599/