Viewing divs with “overflow:auto;” on the iPhone

In playing around with my blog’s new iPhone support I came across a doozy of a problem.

I display all of the code quoted in one of my blog posts in a special div that has the overflow style attribute set to auto. On desktop browsers, these divs are rendered in a block with horizontal and vertical scrollbars. If the lines are too wide for the width of the div they’re displayed in, the horizontal scrollbar is activated; similarly if there are too many lines to fit vertically (I set max-height to 400px currently), the vertical scroll bar is activated. Here’s an example of some code from a recent post, so you can see the effect I’m talking about:

  class SafeStackItem<T> {
    public T Value;
    public Int32 Next;
  }

  class SafeStack<T> where T : class {
    private Int32 head;
    private Int32 count;
    private SafeStackItem<T>[] array;

    public SafeStack(SafeStackItem<T>[] array, int pushFrom, int pushCount) {
      this.head = -1;
      this.array = array;

      count = pushCount;

      head = pushFrom;
      for (int i = 0; i < pushCount - 1; i++)
        array[i + pushFrom].Next = pushFrom + i + 1;
      array[pushFrom + pushCount - 1].Next = -1;
    }

    public Int32 Pop() {
      while (count > 1) {
        Int32 oldHead = head;
        Int32 oldHeadNext = Interlocked.Exchange(ref array[oldHead].Next, -1);

        if (oldHeadNext >= 0) {
          if (Interlocked.CompareExchange(ref head, oldHeadNext, oldHead) == oldHead) {
            Interlocked.Decrement(ref count);
            return oldHead;
          }
          else

            Interlocked.Exchange(ref array[oldHead].Next, oldHeadNext);
        }
      }

      return -1;
    }

    public void Push(Int32 index) {
      Int32 oldHead;
      do {
        oldHead = head;
        array[index].Next = oldHead;
      } while (oldHead != Interlocked.CompareExchange(ref head, index, oldHead));

      Interlocked.Increment(ref count);
    }
  }

However on the iPhone there are no scrollbars. How the heck are you supposed to scroll wide lines from left to right or many lines up or down?

It turns out that iPhone’s mobile Safari has a special trick up its sleeve: you use two fingers. Place two fingers in the block and move them simultaneously. You’ll find that you can scroll the text up/down, left/right. Try it and see using the above code block.

Album cover for AffectionNow playing:
Stansfield, Lisa - Affection
(from Affection)



Posts on similar topics...

7 Responses

  • Sun 30 May 2010
  • 2:51 AM
  •  avatar #1

Mehul Harry said...

Cool trick for mobile safari divs. Thx.

  • Mon 31 May 2010
  • 6:06 PM
  •  avatar #2

n/a said...

where is your header photo from??

  • Mon 31 May 2010
  • 8:06 PM
  • julian m bucknall avatar #3

julian m bucknall said...

n/a: Castlerigg Stone Circle en.wikipedia.org/.../Castlerigg_ston

Cheers, Julian

  • Tue 01 Jun 2010
  • 6:33 PM
  •  avatar #4

Scott Bussinger said...

Sweet! I've run into non-scrolling regions on a few websites and the two-fingered trick works great. But how'd you discover this? In general, that's one problem I have with most touch interfaces -- there's no discovery help.

  • Tue 01 Jun 2010
  • 7:59 PM
  • julian m bucknall avatar #5

julian m bucknall said...

Scott: It's definitely a problem with mobile devices -- how do you discover their capabilities? Read the manual I suppose, or google it, which is what I did. Can't remember now where I found the two-finger trick, but it works in other situations as well (with an frame for example).

Cheers, Julian

  • Tue 01 Nov 2011
  • 10:08 PM
  •  avatar #6

Ruben said...

I think more of a concern is what happens to non iOS users. I get no scrollbar using the default Android browser or Opera and two fingers is not an option.

  • Tue 01 Nov 2011
  • 10:14 PM
  •  avatar #7

Ruben said...

FYI - Couple of solutions I found out there:

chris-barr.com/.../scrolling_a_ove nontroppo.org/.../overflowbug.htm

Leave a Response

Some MarkDown is allowed, but HTML is not. (Click to learn more.)

  • Emphasize with italics: surround word with underscores _emphasis_
  • Emphasize strongly: surround word with double-asterisks **strong**
  • Inline code: surround text with backticks `IEnumerable`
  • Unordered list: start each line with an asterisk, space * an item
  • Ordered list: start each line with a digit, period, space 1. an item
  • Insert code block: start each line with four spaces
  • Insert blockquote: start each line with right-angle-bracket, space > Now is the time...

Search

About Me

I'm Julian M Bucknall, the M because it's my middle initial and because I and the other Julian Bucknall (the movie guy) would like to differentiate ourselves.

I'm a programmer by trade, an actor by ambition, and an algorithms guy by osmosis. I write articles for PCPlus in my spare time, not that there's much of that.

Julian M Bucknall Apart from that, an ex-pat Brit, atheist, microbrew enthusiast, Pet Shop Boys fanboy, slide rule and HP calculator collector, amateur photographer, Altoids muncher.

DevExpress

I'm Chief Technology Officer at Developer Express, a software company that writes some great controls and tools for .NET and Delphi. I'm responsible for the technology oversight and vision of the company.

Validation

Validate markup as HTML5 (beta)     Validate CSS

Bottom swirl

Archives

February 2012 (6)
SMTWTFS
« Jan  
1234
567891011
12131415161718
19202122232425
26272829

Like this Archive Calendar widget? Download it here.

Social networking

Google ads

The OUT Campaign

The OUT Campaign

My Tweets

  • LOL! RT @secretGeek: Watching the NoCss movement gain momentum
  • Blog post: More on caring less about clichés, or not http://t.co/P1Unt4y9
  • @peterritchie Oh my god, the HAIR! It's all over his head! Ewwww. /cc @MillerMark
Bottom swirl