在 iOS 中滚动 <div> 会导致 div 空白

Question

我正在尝试处理一长串 <div>s 并在导航离开并返回后保持列表中的滚动位置。基本上，当在列表中进行选择时，我会捕获 listScrollPos，然后在返回页面时尝试重置它（在 Angular 中 - 因此首先重新渲染列表）。

vm.getAlbums = function() {
    albumService.getAlbums()
        .success(function (data) {
            vm.albums = data;                    
            $timeout(function () {                        
                if (albumService.listScrollPos) {
                    $("#MainView").scrollTop(albumService.listScrollPos);
                    albumService.listScrollPos = 0;
                }
            }, 50); // delay required
        })
        .error(function(err) {
            vm.error.error(err.message);
        });
};

该过程在我测试的所有浏览器中都可以正常工作 - 除了在 WebView 中的 iOS 上（Safari 工作正常）。在其他浏览器中，列表显示并且滚动位置在初始渲染后移动。指针复位，一切正常。

但是，在 iOS 8 上，无论是在 Safari 中还是在 Cordova 中的 Web 视图中，div 都会变成白色并显示为“空”。如果我在任何地方触摸 div，它会立即显示在正确的滚动位置。

IOW，DOM 似乎已更新并呈现，但浏览器正在以某种方式优化在程序控制下移动的滚动内容。

在以编程方式移动滚动位置后，有什么方法可以强制浏览器重新渲染元素？

Answer 1

好的，所以经过更多检查后，问题肯定是与 iOS WebView 隔离的 - iOS 上的 Safari 工作正常，没有以下任何内容。但是 Cordova 应用程序或固定的 iOS 应用程序会表现出这种“白屏”行为。

解决方法是使用“scrollHeight 读取技巧”显式强制 DOM 重新渲染元素。

这是有效的代码：

vm.getAlbums = function() {
    albumService.getAlbums()
        .success(function (data) {
            vm.albums = data;                    
            setTimeout(function () {                        
                if (albumService.listScrollPos) {
                    var el = $("#MainView");
                    el.scrollTop(albumService.listScrollPos);
                    albumService.listScrollPos = 0;
                    $timeout(function() {
                        var t = el[0].scrollHeight;
                    }, 1);
                }
            }, 1); // delay around animation 900
        })
};

注意最后一个 $timeout() 块，它只是读取元素的 scrollHeight，它强制重新渲染并正确显示结果。

由于轻微的渲染延迟，有一点跳动。