iOS上的Chrome浏览器，在重新加载时使用ngRepeat overscrolls

我为一个客户开发了一个小的单页AngularJS应用程序，遇到了一个令人非常恼火的edge案例

为简单起见，考虑以下HTML代码：

<div ng-controller="ServiceGuideCtrl">
    <h1>Care Assessment</h1>
    <form ng-submit="loadResults($event);">
        <div>
            <h2>Is this for you or a loved one?</h2>
            <ul>
                <li><input type="radio" ng-model="who" value="Do you"> Me</li>
                <li><input type="radio" ng-model="who" value="Does your loved one"> Loved one</li>
            </ul>
        </div>
        <div ng-repeat="question in questions">
            <h2>{{ question.text }}</h2>
            <ul>
                <li><input type="radio"> Yes</li>
                <li><input type="radio"> No</li>
            </ul>
        </div>
        <p ng-show="who"><input type="submit" value="Submit answers"></p>
    </form>
</div>

护理评估
这是给你的还是给你爱的人的？

我
爱人

{{question.text}

对
没有

角度控制器：

app.controller('ServiceGuideCtrl', ['$scope', '$timeout', '$window', function($scope, $timeout, $window) {

        $timeout(function() {
            $window.scrollTo(0,0);
        });

        $scope.$watch('who', function(value) {
            $scope.questions = [];
            if (typeof $scope.who !== 'undefined') {
                for (var i=0; i < 20; i++) {
                  $scope.questions.push({
                      'text': $scope.who + ' need this particular thing?'
                  });
              }
            }
        });
}]);

app.controller（'ServiceGuideCtrl'、['$scope'、'$timeout'、'$window'，函数（$scope、$timeout、$window）{
$timeout（函数（）{
$window.scrollTo（0,0）；
});
$scope.$watch（'who'，函数（值）{
$scope.questions=[]；
if（typeof$scope.who！=“未定义”）{
对于（变量i=0；i<20；i++）{
$scope.questions.push({
'text'：$scope.who+'需要这个特殊的东西吗
});
}
}
});
}]);

问题出在Chrome浏览器上的任何iOS平台上：

选择一个“我/爱人”选项

向下滚动问题（最好是底部），但不要单击“提交答案”

在仍向下滚动的情况下重新加载页面

页面将“跳转”到已保存的滚动位置，但由于未加载

ng repeat

元素，因此会过度滚动到完全深灰色区域

更改方向或只是稍微向上滚动页面会将页面跳转到它应该位于的位置

下面是它的屏幕截图：

普朗克：

如果你想的话（因为Plunker使用iFrames，在移动设备上滚动会让奇怪的事情发生）

如您所见，

$window.scrollTo（0,0）

对我没有任何帮助。似乎在加载DOM和Angular之后，Chrome for iOS应用了其保存的滚动位置。如果我使用大约20-30毫秒的超时，页面会在屏幕外闪烁，然后返回顶部，这证实了我的理论。问题是20-30毫秒的值仍然不可靠（它在一半的时间内工作），任何更大的值都会导致更明显的屏幕闪烁

<强>我如何做到，当一个带有NG重复元素的页面被重新加载到IOS上的Chrome时，它不会过度滚动到空白灰色区域？< /强>这是否是来自iOS Chrome浏览器的一个bug？

---

需要注意的是，我会接受这是一个浏览器错误（阅读：不是我的问题），但我办公室的成员有一个反AngularJS的仇杀，所以我想修复它。

我没有iPhone，几乎不理解这个问题，但由于Smarphone似乎在整个页面上应用了一个不希望出现的滚动事件，我将通过为文档设置一个固定的高度来解决这个问题，而不是在容器中处理溢出的滚动条

html { height: 100%; }
body { height: 100%; }
.container { height: 100%; overflow: scroll; }

---

不要使用

$window.scrollTo（0,0）

你能试试

$anchorScroll（）吗

在使用它之前别忘了注入

$anchorScroll

依赖项，我认为

$anchorScroll（）

应该有点麻烦，但是你是否尝试过在页面重新加载之前而不是之后滚动到顶部<代码>$window.onbeforeunload=。。。滚动至顶部…。很抱歉，这不是一个真正的解决方案，但可能有帮助@pankajparkar

$anchorScroll

在由

$location.hash

设置时确实有效，但它会用hashbang污染URL

$anchorScroll

当散列直接通过它时不起作用（例如，

$anchorScroll（'top'）

）。@jtrussell谢谢你的建议，我没有想到这一点！不幸的是，它似乎不起作用。我试过：

$window.onbeforeunload=$window.scrollTo（0,0）我认为您需要更像
$window.onbeforeunload=function（）{$window.scrollTo（0,0）；}很好的解决方法！它开启了一个全新的蠕虫程序，具有不需要的功能（例如，智能手机不再在scrollup上隐藏地址栏，静态scrollbar总是出现在其他浏览器中，等等），但它确实解决了最初的问题。我还不会接受这个答案，因为它不能完全解决我的问题，我可能不会使用它，但赏金是你的，因为你给予了我的问题我认为它需要的关注。谢谢：）只是为了更好地理解：如果你没有在你的页面中显示任何内容（你可以根据随机数来做：显示列表或什么都不显示），ios还会“滚动”到零的中间吗？不，那部分是固定的！窗口的可用性会因为有规律的滚动而变得不稳定。