How to get the scroll bar with CSS overflow on iOS

by

Edit following the comment left, kindly, by kritzikratzi:

[Starting] with ios 5beta a new property -webkit-overflow-scrolling: touch can be added which should result in the expected behaviour.

Some, but very little, further reading:

Original answer, left for posterity.

Unfortunately neither overflow: auto, or scroll, produces scrollbars on the iOS devices, apparently due to the screen-width that would be taken up such useful mechanisms.

Instead, as you’ve found, users are required to perform the two-finger swipe in order to scroll the overflow-ed content. The only reference, since I’m unable to find the manual for the phone itself, I could find is here: tuaw.com: iPhone 101: Two-fingered scrolling.

The only work-around I can think of for this, is if you could possibly use some JavaScript, and maybe jQTouch, to create your own scroll-bars for overflow elements. Alternatively you could use @media queries to remove the overflow and show the content in full, as an iPhone user this gets my vote, if only for the sheer simplicity. For example:

<link rel="stylesheet" href="https://stackoverflow.com/questions/3845445/handheld.css" media="only screen and (max-device width:480px)" />

The preceding code comes from A List Apart, from the same article linked-to above (I’m not sure why they left of the type="text/css", but I assume there are reasons.

More Related Contents:

  1. iPad Safari scrolling causes HTML elements to disappear and reappear with a delay
  2. position: fixed doesn’t work on iPad and iPhone
  3. Styling input buttons for iPad and iPhone
  4. Background image not showing on iPad and iPhone
  5. Angular dynamic background images
  6. Using background-attachment:fixed in safari on the ipad
  7. iOS 7 iPad Safari Landscape innerHeight/outerHeight layout issue
  8. iOS forces rounded corners and glare on inputs
  9. does a background-attachment of fixed work in iOS5?
  10. (Really) Long Background Image Does Not Render on iPad Safari
  11. Border Gradient with Border Radius
  12. Is there a CSS selector by class prefix?
  13. External CSS vs inline style performance difference?
  14. How to store inherit value inside a CSS variable (aka custom property)?
  15. Modify twitter bootstrap navbar
  16. Can I have multiple :before pseudo-elements for the same element?
  17. CSS Text orientation : vertically oriented to the right
  18. Webfont Smoothing and Antialiasing in Firefox and Opera
  19. CSS Pseudo Element Counters: can you increment an alphabet letter “a”, “b”, “c”, etc instead of a number?
  20. Select nth-child across multiple parents
  21. How can I remove the gloss on a select element in Safari on Mac?
  22. CSS two div width 50% in one line with line break in file [duplicate]
  23. How to set height property for SPAN
  24. Can I have a varying number of columns per row in a CSS grid?
  25. Detect if a browser in a mobile device (iOS/Android phone/tablet) is used
  26. Does LESS have an “extend” feature?
  27. Fading out text at bottom of a section with transparent div, but height stays under section after overlaying div
  28. wrong frame size in viewDidLoad [duplicate]
  29. In a bootstrap responsive page how to center a div
  30. Horizontal scroll in DIV with many small DIV’s inside (no text)

Leave a Comment