使用jQuery Mobile时scrollTo被覆盖 [英] scrollTo gets overridden when using jQuery Mobile

问题描述

我正在使用jQuery Mobile创建一个移动Web应用程序，并希望将搜索栏隐藏在可见区域上方.因此，用户需要向下拉页面才能看到搜索栏.我在想最好的方法是像往常一样定义搜索栏，然后在页面加载时手动设置滚动位置，例如向下滚动55px.这是我的代码:

I am creating a mobile web app with jQuery Mobile and would like to hide the search bar above the visible area. So the user would need to pull the page down to see the search bar. I'm thinking the best way to do that is to define the search bar as usual then on page load manually set the scroll position, say down 55px. Here's my code:

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

问题是，刷新页面后我可以看到它是从视图中隐藏的，但是一旦它完全加载，它就会立即跳回到顶部. jQuery Mobile是元凶，因为使用 JS小提琴不会发生这种情况.

The problem is, I can see upon refreshing the page it is hidden from view, but once it has fully loaded it immediately jumps back to the top. jQuery Mobile is the culprit, as it doesn't occur with this simple JS Fiddle.

如何阻止JQM覆盖设置的scrollTop，还是需要以不同的方式实现它?

How can I stop JQM from overriding my set scrollTop, or do I need to implement it differently?

推荐答案

jQuery Mobile具有特殊的滚动功能

jQuery Mobile has a special scroll function $.mobile.silentScroll(). It scrolls without animation but at the same time it doesn't trigger scroll event.

在调用此函数之前，您还需要等待页面完全加载到DOM中.您可以将其绑定到pagebeforeshow或pageshow.

You also need to wait until page is fully loaded into DOM before calling this function. You can bind it to pagebeforeshow or pageshow.

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

演示

Demo

这篇关于使用jQuery Mobile时scrollTo被覆盖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！