HTML5 native scrolling on iPhone iOS5

Posted on: July 11, 2012Author: Rob

Wrapping things up

Now that we have our scrolling issue fixed, let’s finalize our styling. We position the overlay where we want it, fix the size and add some final styling tweaks. We also make our main div scroll natively and now we have completed our initial target layout.

The final styles look something like this:

styles.css

/* =============================================================================
   Demo Styles
   These are the styles used for this demo
   ========================================================================== */
html, body {
  margin: 0;
  padding: 0;
}
button {
  background: #a90329; /* Old browsers */
  background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
  background: linear-gradient(to bottom, #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
  z-index: 2;
}

button.right {
  width: 100px;
  height: 50px;
  position: fixed;
  right: 20px;
  top: 5px; 
}

button.left {
  width: 100px;
  height: 50px;
  position: fixed;
  left: 20px;
  top: 5px; 
}

#main {
  z-index: 1;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

#overlay {
  z-index: 3;
  position: absolute;
  top: 20%;
  left: 20%;
  width: 60%;
  height: 60%;
  background: #666;
  color: #FFF;
  overflow-y: scroll;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #CCC;
  box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, .5);
}

.cell {
  position: relative;
  width: 150px;
  border: 1px solid #a90329;
  padding: 10px;
  margin: 10px;
  -webkit-transform: translateZ(0);
}

And this is the result, just the way we want it:

iPhone HTML5 overlay example

You can also see it in action at the demo page.

That’s it! We now have our (quite brilliantly) styled html5 page with native iPhone scrolling on our main and overlay divs. Not quite as hard as it seemed at first, right?

Download files

All files can be downloaded from my bitbucket repository, by the way. So feel free to play around with it as much as you like. Just clone or download the files here: https://bitbucket.org/two_legs/iphone-scrolling-demo. when you clone the repository, you can even browse around the separate steps within the history to reproduce the steps detailed in this post.

Pages: 1 2 3

  • tom

    Thanks a lot Rob! After trying several attempts with javascript, this was the best solution for scrolling an overlay fixeds-size div on IOS.

    • http://www.two-legs.com/ Rob Been

      You are very welcome! Best of luck with your mobile solution :)

  • tom

    Rob, what iOS version have you tested this CSS fix? It works for me using iOS5, but my client states it doesn’t work on his iPhone version.

    • http://www.two-legs.com/ Rob Been

      Hi Tom, when I created this solution, IOS5 was the latest version. As such, I only tested this on IOS5.

      I believe older versions don’t have any native support for -webkit-overflow-scrolling: touch; so they should have the original scrolling behavior. IOS6 should just work I guess.

  • Naeem Akhtar

    what about the input fields?

  • http://perampokgoogle.blogspot.com/ Local Host