Iphone > safari > Lock viewport scrolling

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 :slight_smile:

(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!



It works, I’ve done it.

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).


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;

No need to apologize :wink:

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

The second part (body positioned fixed) has no effect :frowning:

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).


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.

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,


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

Hi logic_earth,

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


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){

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 :wink:


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?