2

我没有这方面的代码，因为这更像是一个概念问题。

我有一个 jquery 移动页面，它的内容顶部有一个部分，我想放在视口上方。我所做的是设置一个与此部分的高度等效的静默滚动，这使窗口滚动到我想要隐藏的部分的正下方。

我现在遇到的问题是，在页面加载和显示到引发静默滚动之间，有一瞬间能够看到要隐藏的部分，这使得页面看起来有问题，因为你可以看到静音滚动跳跃 100-sum 像素以隐藏该部分。这显然是因为静默滚动是在页面显示后执行的。

有没有办法将 scrollTop 设置为 jquery mobile 以便在显示页面之前执行它，最好是在抛出 pagebeforeshow 事件时执行？据我所知，这个事件是在所有jquery移动小部件初始化后抛出的，那么这个时候就不能在window上设置scrollTop吗？

我要做的是在显示页面之前在窗口上设置 scrollTop 值，这样用户就不必看到页面跳转。

我自己无法正确设置它，我想知道这是否可能发生。

这是我正在尝试重新创建的设置的快速图像。绿色方块是我想要“隐藏”的部分，位于窗口上方。蓝色框代表移动窗口，灰色框代表文档。

在此处输入图像描述

编辑：我检查了移动浏览器；Safari 在纠正静默滚动时没有跳跃/抖动。IOS 上的 Chrome 移动确实有跳跃/抖动，我想知道这是浏览器性能的问题，还是它排队 DOM/viewport 更改的方式...

4

3 回答 3

3

演示：http: //jsfiddle.net/gnsj6/

CSS：

.top {
    height: 200px;
    margin-top: -200px;
}

.container { 
    height: 1000px; 
}

jQuery :

$('html, body').animate({
    scrollTop: $("#topedge").offset().top + 200
}, 0, function() {

    $(".top").css("margin-top","0px");

});

我没有注意到这个解决方案有任何跳跃。没有相当大的数据（http://jsfiddle.net/gnsj6/4/）

于 2013-09-05T14:24:30.793 回答
0

我会说这样的话。隐藏你的body（用visibility，否则你不能滚动）：

....
<body style="visibility:hidden;">....

并使用 jQuery 执行此操作：

$(function(){
    $('body').scrollTop('200px').css('visibility','');

});
于 2013-09-05T14:38:52.497 回答
0

添加一个隐藏页面的类，设置滚动顶部后删除该类。

于 2013-09-05T14:26:07.333 回答