Search jQuery

jQuery Forum

Avoid scroll to top before transition. Is it possible?

in jQuery Mobile • 11 years ago

Hi,

In the demo page for the transitions: http://jquerymobile.com/demos/1.0b2/#/demos/1.0b2/docs/pages/page-transitions.html

If you scroll down the page but still keep the "slide" button so you can push it you can see the transition happening. Safari, Chrome on the desktop.

You can see that just before the slide effect the current page goes back to the top, and then the slide to the other page takes place.

That looks quite ugly on the devices. Is there a way to avoid it?

Thanks.

Replies(8)

the_blur

Re: Avoid scroll to top before transition. Is it possible?

11 years ago

I'm developing an application with a similar requirement, I need to ensure that there's no 'jumpyness' between transition states, I want it to be really smooth, I've tried resetting the scroll position with a function $.mobile.silentScroll(0); called from my <a> tags (but without preventing the default behaviour) with no success. Next thing is to painstakingly map out what happens from the point you hit an A link to the point the thing scrubs in the new page. It works much better on the desktop for some reason, but there is still jumpyness. Funniest bit is once you have scrubbed through the slideshow once without scrolling, everything works great.

jimboidaho

Re: Avoid scroll to top before transition. Is it possible?

11 years ago

I just turned off transitions because of this problem. Let me know if you find an answer.

joeslack

Re: Re: Avoid scroll to top before transition. Is it possible?

11 years ago

Same here. I've had transitions disabled since alpha 2. Every release I turn them back on to check, and they are still no better, unfortunately.

All we can do is hope that we get optimizations in the future. For the time being transitions are absolutely not recommended. It's quite unfortunate that most mobile devices don't play nicely with CSS effects, nor complicated javascript enhancements.

the_blur

Re: Avoid scroll to top before transition. Is it possible?

11 years ago

I'm starting to think that if I can set the jqmData('lastScroll', 0); when each of my pages is created, I cold probably fix my issue, but no matter what I do I can't seem to set that damn value, can anyone enlighten me as to where that gets set? I suspect we need to set it here:

initializePage: function() {
[...]

$pages.add( ":jqmData(role='dialog')" ).each(function(){
var $this = $(this);
// unless the data url is already set set it to the id
if( !$this.jqmData('url') ){
$this.attr( "data-" + $.mobile.ns + "url", $this.attr( "id" ) );
}

/* Magical setting of the lastScroll parm to 0 for every page so that I get nice smooth scrolling for my app unless the user mucks about with it. Yup, set it right here, but my pages are still scrolling all the way down after transitioning ...*/
$($this).jqmData("lastScroll", 0); // <- YAY! That does it, unfortunately, the transition engine or browser don't seem to care...
});
[...]
}

DOH! Ok, no love on that one... back to the drawing board, i now suspect it's in:

function transitionPages( toPage, fromPage, transition, reverse )

I will experiment a lil bit and report my findings...

Ok, so it was in:

promise.done(function() {

[...]

//jump to top or prev scroll, sometimes on iOS the page has not rendered yet.

if( toScroll ){

$.mobile.silentScroll( toScroll );

$( document ).one( "silentscroll", function() { reFocus( toPage ); } );

}

else{

reFocus( toPage );

}

window.scrollTo(0,0); <- Reset page position just before load, works in Chrome / Webkit, but I have no iphone to test with. This should reliably send your browser to the top of the screen every time though, at least it looks hopeful! Yay! Go me.

[...]

});

gunsnrails

Re: Re: Avoid scroll to top before transition. Is it possible?

11 years ago

the_blur I got a bit lost with your comment.

Are you trying to avoid going to the top before a transition? or ensuring that it goes to the top before a transition?
From my side I have disabled transitions and hope the framework will fix them soon. Changing the platform will only add more work when new releases come out, I'm too lazy for that.

Cheers.

the_blur

Re: Avoid scroll to top before transition. Is it possible?

11 years ago

I was having a problem where after a nice smooth page transition, my next page would do a jump to the previous page's scroll location / bottom of the page or where the nav buttons were (it's a mobile slideshow thingie). I figured if I could set the scroll position of the page before the transition happened, I could control that behaviour. So I was trying to get rid of the ugly anchor jump after the page transition. I have, for now, migrated that ugly jump to the page before the transition which is definetly preferable if not optimal. Optimally, I might add some tweening behaviour to the framework to tween to 0 on the previous page so that everything looks nice and smooth but for now that little kludge fixed my problem enough to send a draft to the client.

gunsnrails