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工作正常）。在其他浏览器中，列表显示，并在初始渲染后移动滚动位置。指针重置，一切都很好。

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

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

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

Answer 1

好的，所以经过多一点检查后，问题肯定与iOS WebView隔离 - iOS上的Safari工作正常，没有以下任何一项。但Cordova应用程序或固定的iOS应用程序展示了这种“白色”和“白色”的应用程序。行为。

解决方法是使用＆＃39; 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，强制重新渲染并正确显示结果。

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

在iOS中滚动<div>会导致div消隐

1 个答案: