jQuery Mobile - 页面加载后跳转到顶部

7
我们在 m.swisswebcams.ch 使用jQuery mobile。当页面仍在加载时我向下滚动,它似乎总是会在页面加载时跳回顶部(window.onload)。

如何解决这个问题?


重现此问题的步骤:

  1. 在您的移动浏览器中打开m.swisswebcams.ch
  2. 在页面仍在加载时立即向下滚动
  3. 等到页面自动跳转到顶部
  4. (这不总是发生。所以有时您需要再试一次。)

结果

打开网站:

enter image description here

向下滚动:

enter image description here

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

enter image description here


@Gunnar 你说的"fire an URL"是什么意思?我并不会触发任何东西,只是加载页面而已。 - Simon Ferndriger
@mplungjan 没有改变任何东西(至少在iPhone上)。还有其他的想法吗?你能投票支持这个问题吗? - Simon Ferndriger
为什么我要点赞呢?这并不会使问题更加突出,而且这个问题非常糟糕。虽然我没有投反对票,但它并没有遵循 [mcve]。 - mplungjan
我无法在我的iPhone上的Chrome上重现这个问题,但在Safari上它在广告加载后跳动。如果你去掉广告会发生什么? - mplungjan
Simon,我正在谈论请求URL的两种方式:一种是“完整”或“正常”或“非JavaScript”请求,例如输入URL、单击链接或提交表单,另一种是后台Ajax请求,其中JavaScript将响应填充到HTML容器中。第一种方式在加载时总是跳转到页面顶部(在所有浏览器中,除非您通过F5刷新已加载的页面)。简短明了:“这个行为是有意设计的”。 - Gunnar
显示剩余7条评论
2个回答

3

好的,这个行为在jQuery Mobile中是默认的(实际版本为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变更日志

修复页面加载,如果用户已经滚动,则防止静默滚动 (#3958, 0996492)


是的,这个方法奏效了!赏金已经正式结束,但我认为/希望我仍然能够给你应得的100分!非常感谢。 - Simon Ferndriger
很高兴这个对你有帮助。如果需要更多信息,请随时再次提问。 - deblocker

-1

如评论中所述:这种行为是设计上的。请求URL有两种方式:一种是“完整”或“正常”或“非JavaScript”请求,例如输入URL、单击链接或提交表单;另一种是后台ajax请求,其中JavaScript将响应填充到HTML容器中。第一种方式在加载时总是跳转到页面顶部(在所有浏览器中IMHO,除非您通过F5刷新已加载的页面)。

更新

作为网站程序员,你可以绕过这个浏览器行为。只需使用jQuery loaderjQuery Mobile events来显示一些状态栏或旋转圆圈,同时页面正在加载。


啊,好的,但是为什么呢?如果页面在加载/渲染/请求开始时就跳转到页面顶部右侧,那会更有意义。是否可以更改此触发器的时间以进行跳转到顶部? - Simon Ferndriger
这显然不是一个用户友好的行为。 - Simon Ferndriger
这将是一个基于浏览器的编程请求,每个浏览器都是“正常”的行为。首先你要装满杯子,然后再喝咖啡 :-) 使用jQuery移动事件,您可以1.)在页面加载时显示一些指示器,以及2.)在浏览器中呈现完全加载的页面,请参见https://api.jquerymobile.com/category/events/。 - Gunnar
1
好的,咖啡的例子很有道理 :) 我明白这种行为对于(2)是有意义的,因为浏览器需要先获取网站才能跳转到任何地方,但是关于(1),网站在加载时已经开始显示了,所以浏览器应该能够跳转到顶部 - 或者将其与普通网站(非jquery)进行比较,它也在加载时显示部分内容,但当网站完全加载时不会跳转到顶部 - 或者我完全误解了你的意思? - Simon Ferndriger

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接