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 div
s 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.
Now playing:
Stansfield, Lisa - Affection
(from Affection)
8 Responses
#1 Mehul Harry said...
30-May-10 2:51 AMCool trick for mobile safari divs. Thx.
#2 n/a said...
31-May-10 6:06 PMwhere is your header photo from??
#3 julian m bucknall said...
31-May-10 8:06 PMn/a: Castlerigg Stone Circle en.wikipedia.org/.../Castlerigg_ston
Cheers, Julian
#4 Scott Bussinger said...
01-Jun-10 6:33 PMSweet! 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.
#5 julian m bucknall said...
01-Jun-10 7:59 PMScott: 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
#6 Ruben said...
01-Nov-11 10:08 PMI 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.
#7 Ruben said...
01-Nov-11 10:14 PMFYI - Couple of solutions I found out there:
chris-barr.com/.../scrollingaove nontroppo.org/.../overflowbug.htm
#8 Muneeb said...
12-Apr-12 4:51 AMGreat... 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.
_emphasis_
**strong**
[text](url)
`IEnumerable`
* an item
1. an item
> Now is the time...
Preview of response