scrollTo在使用jQuery Mobile时被覆盖

时间:2013-12-05 07:12:52

标签: jquery-mobile scroll load scrolltop

我正在使用jQuery Mobile创建一个移动网络应用程序,并希望隐藏可见区域上方的搜索栏。因此,用户需要将页面向下拉以查看搜索栏。我认为最好的方法是像往常一样定义搜索栏然后在页面加载时手动设置滚动位置,比如说55px。这是我的代码:

$(document).ready( function() {
    $("html,body").scrollTop(55);
}

问题是,我可以看到刷新页面时它被隐藏起来,但是一旦它完全加载它立即跳回到顶部。 jQuery Mobile是罪魁祸首,因为它不会出现在这个简单的JS Fiddle

如何阻止JQM覆盖我的set scrollTop,或者我是否需要以不同方式实现它?

1 个答案:

答案 0 :(得分:2)

jQuery Mobile有一个特殊的滚动功能$.mobile.silentScroll()。它在没有动画的情况下滚动,但同时它不会触发scroll事件。

在调用此函数之前,您还需要等到页面完全加载到DOM中。您可以将其绑定到pagebeforeshowpageshow

$(document).on("pagebeforeshow", "#page", function () {
    setTimeout(function () {
        $.mobile.silentScroll(100);
    }, 10);
});
  

<强> Demo