Question

我一直在jQuery Mobile网站上工作，并且注意到一旦页面被加载，它会在一两秒后跳回到页面顶部 - 如果用户立即向下滚动，会给用户带来可怕的体验

事实证明，只有当页面上出现HTML 5 VIDEO标记时才会发生这种情况 - 即使它没有关联的脚本，绝对大小，即使它在iframe中也是如此。

我制作了一个示例测试页面来演示：

如何测试行为

打开jsfiddle http://jsfiddle.net/MR966/1
点击Run
在输出面板中单击立即，然后按几次空格键向下滚动。您必须在页面加载的瞬间执行此操作。
加载Youtube视频后，页面将跳转到顶部。
点击Run，如果您的速度不够快，请重试。

`<HEAD>`

<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.css" />    
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.js"

`<BODY>`

    <h1>JQuery Mobile Video Jump</h1>

    <div class="fake-content"></div>
    <div class="fake-content"></div>
    <div class="fake-content"></div>
    <div class="fake-content"></div>
    <div class="fake-content"></div>
    <div class="fake-content"></div>
    <div class="fake-content"></div>

    <iframe width="640" height="390" src="//www.youtube.com/embed/EQ1HKCYJM5U" frameborder="0" allowfullscreen></iframe>

内容可以是任何内容 - 只需至少一个屏幕长度。

.fake-content
{
    margin: 1em;
    background: orange;
    height: 10em;
}

注意

删除jQuery Mobile会停止此行为：http://jsfiddle.net/MR966/2/（您将看到背景为黄色，表明它未初始化）。所以它肯定会做一些事情来引起这种情况。
删除视频会停止此行为。
纯视频标签和YouTube都会出现这种情况 - 考虑到它们位于外部加载的iFrame中，这有点令人惊讶。
这个词＆＃39;视频＆＃39;在jQuery Mobile源代码中不会出现一次！
这种情况发生在Chrome / iPad / IE / Firefox上。
在iPad上它特别糟糕，因为在由于去加速完全停止滚动之前页面没有跳到顶部。
如果您没有看到问题继续尝试，请使用较慢的互联网连接或将HTML从JSFiddle复制到本地页面。
在我的实际页面上使用其他资源，这是一个比这个简单的快速测试页面更大的问题。

我的每个页面都有视频，如果我无法解决这个问题，我需要在第11个小时放弃JQM： - /

Answer 1

这是正常的预期行为，让我解释原因。

当页面内容较大时，可用页面高度jQuery Mobile会在转换到其他页面之前将页面滚动到顶部。发生这种情况是因为，如果您转换完全滚动的页面而第二页不够高，您将面临空白屏幕。因此，jQuery Mobile需要在转换发生之前纠正当前可查看的位置。

使用iScroll插件+ iScrollView扩展程序可以轻松解决这个问题。你想要有任何不同，一切都会好起来的。

这是因为iScroll div容器的高度与屏幕高度一样高，而内部div可以滚动，并且可以根据需要获得尽可能多的高度。因为最高的div是高的，因为可用的屏幕高度页面通常会转换而没有不必要的跳跃。

详细了解此问题 here 和 here 。

Answer 2

此问题仅发生在初始页面加载上。看一下源代码，结果与这一行有关：

// window load event
// hide iOS browser chrome on load if hideUrlBar is true this is as fall back incase we were too early before
if ($.mobile.hideUrlBar)
{
    $window.load( $.mobile.silentScroll );
}

我只注意了$window.load行，问题就消失了。

问题当然是拥有大量视频/图像的$window.load可能需要1-2秒。因此，如果用户在此期间滚动，您将获得痛苦的跳跃。

此hideUrlBar行为与尝试隐藏某些iOS特定工具栏有关，我甚至不关心这些工具栏。所以我可以在没有这个的情况下做到＆＃39;回归＆＃39;。

在hideUrlBar=false中设置mobileinit的问题在于，此变量在正常滚动期间在其他位置使用，并且意味着窗口在转换后不会滚动到顶部。我认为这是一个错误。

最终修复

我决定这个：

在我的mobileinit活动中，我设置了hideUrlBar=false以阻止$window.load事件的运行。

当页面加载后，我重新启用它，以便不打破页面之间的转换（从底部的链接到另一个页面）。

    // mobile init
    $(document).on('mobileinit', function ()
    {
        $.mobile.hideUrlBar = false;
        $.mobile.defaultDialogTransition = "pop";
        $.mobile.defaultPageTransition = "none";
    });


    $(window).load(function ()
    {
        $.mobile.hideUrlBar = true;
    });

这似乎工作正常，但设置hideUrlBar=false打破其他滚动的事实是不好的。至少我设法修复它而不必更改源。

其他说明

我只有这样的跳跃＆＃39;初始页面加载期间的问题。这在转换期间对我来说不是问题，因为上面的$ window.load代码只执行一次，而不是在转换后执行。
无论如何我都关闭了转场。
我的应用程序完全响应，可以在移动设备和桌面设备上运行。

jQuery Mobile页面上的视频标签会导致页面跳转到顶部

如何测试行为

`<HEAD>`

`<BODY>`

注意

2 个答案:

最终修复

其他说明