SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    (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

  2. #2
    SitePoint Addict fattyjules's Avatar
    Join Date
    Dec 2005
    Posts
    295
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  3. #3
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    SitePoint Addict fattyjules's Avatar
    Join Date
    Dec 2005
    Posts
    295
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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;
    }

  5. #5
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  6. #6
    SitePoint Addict fattyjules's Avatar
    Join Date
    Dec 2005
    Posts
    295
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hm, that's what I think, too.

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

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

    Thanks and cheers,

    Christian

  8. #8
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Here is a better idea. Don't bother.
    No more trouble.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  9. #9
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi logic_earth,

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

    Cheers,
    Christian

  10. #10
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi everyone,

    I found a JS-solution for this.

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

    HTML Code:
    // 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

  11. #11
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •