jQuery Mobile - 窗口加载后跳转到顶部

Question

我们使用 jQuery mobile m.swisswebcams.ch 。当我在页面仍在加载时向下滚动时，它似乎总是在页面加载时再次向上跳(即 window.onload)。

如何解决这个问题？

<小时/>

重现此问题的步骤:

1. 打开m.swisswebcams.ch在您的移动浏览器中
2. 在页面仍在加载时立即向下滚动
3. 等待页面自行跳转到顶部
4. (这种情况并不总是发生。因此您有时可能需要重试。)

<小时/>

结果

打开网站:

向下滚动:

自动跳转到顶部(不需要):

Answer 1

嗯，jQuery Mobile 中默认存在此行为(实际 v. 1.4.5)。来自 jQuery Mobile 源代码:

    // hide iOS browser chrome on load if hideUrlBar is true this is to try and do it as soon as possible
    if ( $.mobile.hideUrlBar ) {
        window.scrollTo( 0, 1 );
    }

这是前面评论中引用的silentScroll函数:

....
    // Scroll page vertically: scroll to 0 to hide iOS address bar, or pass a Y value
    silentScroll: function( ypos ) {
        if ( $.type( ypos ) !== "number" ) {
            ypos = $.mobile.defaultHomeScroll;
        }

        // prevent scrollstart and scrollstop events
        $.event.special.scrollstart.enabled = false;

        setTimeout(function() {
            window.scrollTo( 0, ypos );
            $.mobile.document.trigger( "silentscroll", { x: 0, y: ypos });
        }, 20 );

        setTimeout(function() {
            $.event.special.scrollstart.enabled = true;
        }, 150 );
    },
...

此解决方法自 iOS 7 起不再有效，但它是进入“全屏模式”时最需要的功能之一(请参阅 SO 上的很多相关问题)。

这实际上是引用:iOS 8 removed "minimal-ui" viewport property, are there other "soft fullscreen" solutions?还提供了最新版本 iOS 的详细说明。

只是猜测，也许您没有注意到此行为，因为您有较新的 iOS 版本，或者您不需要全屏，因为您已经在手动滚动。

您可以通过覆盖 JQM 设置来防止初始滚动顶部:

<script type="text/javascript">
    $(document).bind("mobileinit", function() {
        $.mobile.ajaxEnabled = false;
        $.mobile.hideUrlBar = false; // <---- add this line
    });


    var GLOBAL = {
        language : 'de'
    };
</script>

尝试一下，如果这可以解决您的问题，请告诉我。在我的测试中，它有效。

编辑:这种恼人的行为已在即将推出的 JQM 1.5 版本中得到修复:

引用:jQuery Mobile 1.5.0-alpha1 Changelog

Fixed page load to Prevent silentScroll if user has already scrolled (#3958, 0996492)