iPhone .scrollTo（）无法正确呈现屏幕

Question

我创建了一个angularJS和Phonegap应用，其中的固定导航栏和页脚位于ui视图之外。 像这样

<div class="topcoat-navigation-bar">
  // Contents of navigation bar
</div>
<div class="main" ui-view="main"></div>
<div class="topcoat-button-bar button-bar-footer">
  // Contents of footer 
</div>

根据状态将模板加载到ui视图中。 在设备模板中，我有这个div，其中包含大量设备。 该列表是可滚动的。

<div class="device-container" scrollRecord scrollTo>
   //list of devices
</div>

这是此容器的CSS

.device-container {
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  -webkit-transform: translate3d(0px, 0px, 0px);
  clear: both;
}

我想要的是在向下滚动列表时，应用程序存储滚动的位置。 当您关闭应用程序并再次打开它时，它会打开到相同的滚动位置。 因此，我制定了这些指令来记录滚动位置，然后在再次加载屏幕时匹配滚动位置。

    .directive('scrollRecord', function () {
            return {
                restrict: 'A',
                link: function (scope, element, attrs) {

                    angular.element(element).bind("scroll", function () {
                        var element_top = $(element).scrollTop();
                        localStorage.setItem('devicesScrollPosition', JSON.stringify(element_top));

                    });


                }
            };
        })  
  .directive('scrollTo', function ($anchorScroll, $timeout, $location) {
            return {
                restrict: 'A',
                link: function (scope, element, attrs) {
                    var scrollPost = JSON.parse(localStorage.getItem('devicesScrollPosition'));
                    $timeout(function () {
                        $(element).scrollTop(scrollPost);               
                    });
                }

            };
        })

这在Android上可以100％运行，但是在iPhone上，屏幕会滚动到该位置，但是直到您触摸屏幕后才绘制内容。 我尝试了许多修复程序，从使用$(window)进行记录到尝试触发触摸事件，甚至添加div并在屏幕on load上将其删除均已修复。

Answer 1

使用window.scrollTo（0.0）; 屏幕加载后立即显示。