StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POCustom Scrollbar for iPhone's UIView (Making Long Scrolls Not Suck)
text
Body
copied!<p>In a post, <a href="http://www.azarask.in/blog/post/solving-the-touch-screen-scroll-problem/" rel="nofollow noreferrer"><em>Making Long Scrolls on the iPhone Not Suck</em></a>, Aza Raskin describes an alternative scrollbar control that's better at getting around on very long pages:</p> <p><img src="https://farm3.static.flickr.com/2555/3853366575_5fcaf525e5_o.jpg" alt="Sticky Scroll Indicator"></p> <p>It's not important that the scrollbar "remains for some amount of time" to activate it; I'm fine with simply swiping along the right edge of the iPhone's screen to grab hold of the scrollbar handle. The idea is that if I drag the handle 3/4 of the way down on the physical screen, I'd be 3/4 of the way down on the page.</p> <p>Tthe Dropbox iPhone app (it's great, btw!) has exactly this kind of scrollbar for long PDF documents. Regular scrolling is done by dragging anywhere but on the handle; dragging the handle moves the view to that location. This seems to have been implemented "from scratch", as I don't think the SDK is flexible enough to customize the behavior of the existing scrollbar.</p> <p>However, Dropbox uses the native document viewers to show documents on the iPhone, so somehow they add the scrollbar functionality to it. See the scrollbar handle? You can drag that to quickly get somewhere else in the document.</p> <p><img src="https://i.stack.imgur.com/WpNSF.png" alt="Dropbox scrollbar at the top"> <img src="https://i.stack.imgur.com/ncqEE.png" alt="Dropbox scrollbar at the bottom"></p> <p>This concept is <em>very</em> similar to how index bars work in UITableView (ie. Contacts.app); the index appears as a bar on the right hand side of the table (for example, "a" through "z"), and you can touch a particular label to jump to the target section. In this case, however, a very long page doesn't have sections, and it should work for general-purpose scrolling, not jumping to sections.</p> <p>So how can I go about implementing this method of scrolling? I'm looking for general ideas and specific implementation details. I'm also interested if an open-source implementation exists (this seems like a general-purpose problem/solution).</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload