是否可以在移动设备上显示页面之前在页面上设置 scrollTop？答案

【问题标题】：Is it possible to set a scrollTop on a page before the page is shown, on mobile?是否可以在移动设备上显示页面之前在页面上设置 scrollTop？
【发布时间】：2013-09-05 14:21:47
【问题描述】：

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

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

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

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

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

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

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

编辑：我检查了移动浏览器； Safari 在纠正静默滚动时没有跳跃/抖动。 IOS 上的 Chrome 手机确实有跳转/抖动，不知道是浏览器性能的问题，还是它对 DOM/viewport 变化进行排队的方式...

【问题讨论】：

不，我认为这不可能。您可以隐藏您的 html ，设置滚动顶部并再次显示您的 html。
Vimeo 对video pages 具有此效果，以显示该创作者的更多视频。可能值得调查一下他们是如何做到的。
桌面版 Vimeo 可以，但移动版没有此功能。
@Prusprus 我在 Chrome 中使用 nexus 7 Android 4.3，它对我来说运行良好。移动对您来说意味着什么？
我正在检查 CrIOS 和 safari mobile。我承认我不清楚使用的手机，但我自己还没有在 Android 上尝试过。它在我的 IOS 上的 Safari 上运行良好，但在 chrome 上却不行。

标签： jquery jquery-mobile mobile

【解决方案1】：

演示：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/)

【讨论】：

这样还是会跳起来
已修复，现在应该不会跳转了
是的，但这会导致另一个问题。设置滚动条后。整个页面将向下动画200px。
如果您以某种速度设置页面滚动，则两个动画将以相同的速度进行，您将不会注意到任何内容。
不客气，老实说，我想知道它是如何工作的......但它工作得很好！

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

然后用 jQuery 来做这个：

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

});

【讨论】：