Is it possible to set a scrollTop on a page before the page is shown, on mobile?

Question

I have no code for this, as this is more of a concept question.

I have a jquery mobile page that has a section at the top of its content that I want to place above the viewport. What i've done is set a silentscroll that is equivalent to the height of this section, which makes the window scroll to just below the section i want hidden.

The problem I have right now is that between when the page is loaded and shown to when the silentscroll is thrown, there is a split second of being able to see the section to be hidden, which makes the page look buggy given that you can see the silentscroll jump by 100-sum pixels to hide the section. This is clearly because the silentscroll is execute after the page is shown.

Is there a way to set a scrollTop to jquery mobile for it to be executed before the page is shown, preferably around when the pagebeforeshow event is thrown? As far as I know, this event is thrown after all the jquery mobile widgets are initialized, so couldn't the scrollTop be set on the window at this time?

What I'm trying to do is set the scrollTop value on the window before the page is shown, so that the user doesn't have to see the page jump.

I haven't been able to correctly set it up myself, I'm wondering if it's event possible.

Here's a quick image of the setup i'm trying to recreate. The green square is the section I want 'hidden', above the window. The blue box represents the mobile window and the grey box represents the document.

enter image description here

EDIT: I've checked mobile browsers; safari has no jump/jitter when it corrects for the silentscroll. Chrome mobile on IOS does have the jump/jitter, I wonder if it's a question of browser performance, or the way it queues DOM/viewport changes...

No I don't think that is possible. You could hide your html , set the scrolltop and show your html again. — putvande, Sep 05 '13 at 14:23
Vimeo has this effect on [video pages](http://vimeo.com/71370784) to show more videos by that creator. Might be worth it to investigate out how they do it. — MLM, Sep 05 '13 at 14:33
Vimeo for desktop yes, but mobile doesn't have this feature. — Prusprus, Sep 05 '13 at 14:39
@Prusprus I am on a nexus 7 Android 4.3 in Chrome and it is working fine for me. What does mobile mean to you? — MLM, Sep 05 '13 at 23:02
I was checking CrIOS and safari mobile. I admit I wasn't clear on the phone used, but I haven't yet tried it on Android myself. It worked fine on Safari on my IOS, but not on chrome. — Prusprus, Sep 06 '13 at 13:51

Fez Vrasta · Accepted Answer · 2013-09-05T14:50:58.997

3

DEMO: http://jsfiddle.net/gnsj6/

CSS:

.top {
    height: 200px;
    margin-top: -200px;
}

.container { 
    height: 1000px; 
}

jQuery:

$('html, body').animate({
    scrollTop: $("#topedge").offset().top + 200
}, 0, function() {

    $(".top").css("margin-top","0px");

});

I can't notice any jump with this solution. Neither with quite huge data (http://jsfiddle.net/gnsj6/4/)

edited Sep 05 '13 at 14:50

answered Sep 05 '13 at 14:24

Fez Vrasta

14,110
21
98
160

2

That would still make it jump – putvande Sep 05 '13 at 14:25
fixed, now it should not jumps – Fez Vrasta Sep 05 '13 at 14:28
Yeah true, but this causes another problem. After you set the scrolltop. The whole page will animate `200px` downwards. – putvande Sep 05 '13 at 14:29
if you make the page scroll with some speed set the two animations will be at the same speed and you will not notice anything. – Fez Vrasta Sep 05 '13 at 14:30
The OP does not want to scroll. OP wants to scroll the page to a certain offset (without animating). – putvande Sep 05 '13 at 14:31
My hesitation with this answer was that it wasn't using jquery mobile - specific methods, but it seems that scrolling using the animate resolves the jump issue. Thanks so much for your help! – Prusprus Sep 05 '13 at 15:11
1

you're welcome, honestly I wonder how it can works.. but it works so it's fine! – Fez Vrasta Sep 05 '13 at 15:16

score 0 · Answer 2 · answered Sep 05 '13 at 14:26

0

Add a class that hides the page, after you set scroll top remove the class.

answered Sep 05 '13 at 14:26

Jeffpowrs

4,430
4
30
49

score 0 · Answer 3 · answered Sep 05 '13 at 14:38

0

I would say something like this. Hide your body (with visibility, otherwise you can't scroll):

....
<body style="visibility:hidden;">....

And do this with jQuery:

$(function(){
    $('body').scrollTop('200px').css('visibility','');

});

answered Sep 05 '13 at 14:38

putvande

15,068
3
34
50

Is it possible to set a scrollTop on a page before the page is shown, on mobile?

3 Answers3