apple-mobile-web-app-capable angular-ui-bootstrap 模态滚动问题
apple-mobile-web-app-capable angular-ui-bootstrap modal scrolling issue
我发现我正在开发的一个简单 to-do 列表网络应用程序存在问题。我正在使用
<meta name="apple-mobile-web-app-capable" content="yes">
所以它可以做 iPhone 独立启动的事情。
我遇到的问题是,当应用程序从主屏幕启动时,我滚动到超出屏幕底部的列表底部并尝试添加项目,模态混乱为如下所示:
它在固定 header 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>
header 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-capable 模式下注意到的另一件事是,如果当我位于列表顶部时模态出现,我可以向下滚动并查看模态淡入淡出叠加结束的位置,从而显示一些列表项.
我对这个问题不太满意的解决方案是使用
$window.scrollTo(0,0);
打开模式之前
我发现我正在开发的一个简单 to-do 列表网络应用程序存在问题。我正在使用
<meta name="apple-mobile-web-app-capable" content="yes">
所以它可以做 iPhone 独立启动的事情。
我遇到的问题是,当应用程序从主屏幕启动时,我滚动到超出屏幕底部的列表底部并尝试添加项目,模态混乱为如下所示:
它在固定 header 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>
header 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-capable 模式下注意到的另一件事是,如果当我位于列表顶部时模态出现,我可以向下滚动并查看模态淡入淡出叠加结束的位置,从而显示一些列表项.
我对这个问题不太满意的解决方案是使用
$window.scrollTo(0,0);
打开模式之前