Iphone > safari > Lock viewport scrolling

[Christian79]

Hi everyone,

first of all: I'm new to this forum (as a member, not as a visitor) and I hope, you can help me with this problem

(When this is the wrong subforum, please let me know)

I try to develop a standalone webapp for the iphone.

My problem is, that I want/need to have a fixed viewport. Or in other words, I don't want the internal Browser (safari) to scroll beneath the bottom of the page.

For a better understanding, here is the behaviour, I don't want:

Any suggestions or hints, how I could avoid that? Is there maybe a meta-value, I could use? I checked them, but maybe I missed something.

Another possibility could be, to check the touchmove-event and stop it, when the border has reached. Just an idea I haven't checked yet.

Please feel free to post any ideas to this!

Cheers,
Christian

[fattyjules]

http://developer.apple.com/safari/library/codinghowtos/Mobile/UserExperience/index.html#GENERAL-DISABLE_USER_ZOOMING_AND_SCALING_IN_MY_WEB_APPLICATION

It works, I've done it.

[Christian79]

Hi fattyjules,

thanks fo ryour reply, but this is not the issue.

The width and scalability (can I say that in english .. scalability?) are set as mentioned on the apple-ressource you linked to.

These settings don't touch the scrolling-functionality.

Maybe I posted a wrong example (the goolge screenshot above should only show the behaviour i ment).

I already have a standalone web app with a fixed body-height (= viewport-height) and I don't want the safari to scroll beneath the bottom of it (and afterwards bounce back).

Cheers,
Christian

[fattyjules]

My apologies Christian, I didn't read your post properly. That will teach me to be impatient!

I can't test this (I don't have an iPhone handy), but could you apply this CSS;

body {
height: 360px; /* or whatever the iPhone viewport height is */
overflow: hidden;
}

Or maybe this;

body {
position: fixed;
top: 0;
left: 0;
}

[Christian79]

No need to apologize

The first CSS-Part is already in my project (with overflow:hidden).

The second part (body positioned fixed) has no effect

I guess, that the safari-engine scrolls the viewport beyond bottom (for usability) and not the page itself. Therefore, CSS-Attributes may not have any effect on this issue (I guess).

Cheers,
Christian

[fattyjules]

It might not be possible to do it. Perhaps it's a usability issue - users are allowed to scroll beyond the bottom of the page so they can more easily tap any links at the bottom.

[Christian79]

Hm, that's what I think, too.

Maybe there's some dirty javascript-trick I could use. :shifty:

I will test some possibilities I think of and keep you up to date.

Thanks and cheers,

Christian

[logic_earth]

Here is a better idea. Don't bother.
No more trouble.

[Christian79]

Hi logic_earth,

sorry, but there is no link included in your post
(Or, I missed it somehow)

Cheers,
Christian

[Christian79]

Hi everyone,

I found a JS-solution for this.

You can prevent scrolling of specific Elements with the event.preventDefault()-Function:

// Catch touchevents on dont_scroll-objects
$('body .dont_scroll').bind("touchmove", {}, function(event){
  event.preventDefault();
});

This example prevents scrolling of every Element with a "don_scroll"-Class. In my case, the header and footer elements have this class.

This examples uses jquery for DOM-Manipulation and -Interaction.

I hope, this helps others, too

Cheers,
Christian

[Christian79]

Maybe I should add some informations.

The event-Handling in iphone-safari is well documented

This only works on iphone-safari, as there must be the "touchmove" event. I don't know, if this is some kind of standard for mobile devices and could work for other devices/os too?

Cheers,
Christian