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)


Loading similar posts...   Loading links to posts on similar topics...

8 Responses

 avatar
#1 Mehul Harry said...
30-May-10 2:51 AM

Cool trick for mobile safari divs. Thx.

 avatar
#2 n/a said...
31-May-10 6:06 PM

where is your header photo from??

julian m bucknall avatar
#3 julian m bucknall said...
31-May-10 8:06 PM

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

Cheers, Julian

 avatar
#4 Scott Bussinger said...
01-Jun-10 6:33 PM

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.

julian m bucknall avatar
#5 julian m bucknall said...
01-Jun-10 7:59 PM

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

 avatar
#6 Ruben said...
01-Nov-11 10:08 PM

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.

 avatar
#7 Ruben said...
01-Nov-11 10:14 PM

FYI - Couple of solutions I found out there:

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

 avatar
#8 Muneeb said...
12-Apr-12 4:51 AM

Great... thanks, i am so happy to see this trick :)

Leave a response

Note: some MarkDown is allowed, but HTML is not. Expand to show what's available.

  •  Emphasize with italics: surround word with underscores _emphasis_
  •  Emphasize strongly: surround word with double-asterisks **strong**
  •  Link: surround text with square brackets, url with parentheses [text](url)
  •  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...
Preview of response