Question

我创建了一个angularJS和Phonegap应用程序，其中包含一个固定的导航栏和页脚，位于ui-view之外。像这样。

<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-view中。在设备模板中，我有这个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）;屏幕加载后立即

iPhone .scrollTo（）没有正确呈现屏幕

1 个答案: