For live demo see: http://www.magicscroll.net/ScrollTheWeb.html
Readability.js is based on the code originally by Arc Labs.
It is released under the Apache 2 License. As is the rest of this code.
The icons are taken from the Gnome High Contrast Theme and used under the terms of the creative commons share-alike license.
Touch controls have been tested on a Samsung Galaxy Tab 7.1, with Android's native browser and Chrome.
Try the touch control demo here.
You can hold SHIFT to try the touch controls with the mouse.
Listed below are the three possible states that the scroll guide can be in before the user touches the screen.
- TOP: the scroll guide is at the very top of the screen, meaning the current page has a zero height.
- MID: the scroll guide is somewhere between the top and bottom.
- BOT: the scroll guide is at the very bottom of the screen, meaning the current page has full height.
TOP MID BOT
+========+ +--------+ +--------+ ^
| | | | | | | Top Snap/Grab Radius
| | | | | | v
| | | | | |
| | | | | | ^
| | |========| | | | Mid Grab Radius
| | | | | | | (relative to current guide)
| | | | | | v
| | | | | |
| | | | | | ^
| | | | | | | Bottom Snap/Grab Radius
+--------+ +--------+ +========+ v
A touch starting within any radii listed above will cause the scroll guide to snap to the cursor.
In the TOP state, touching within the BOT's radius should execute "showPrevPage", bringing us to the BOT state of the previous page.
In the BOT state, touching within the TOP's radius should execute "showNextPage", bringing us to the TOP state of the next page.
Any touch starting outside the radii will defer the scroll guide grab until the touch moves into the radii.
Any move will drag the scroll guide if it is currently snapped to the cursor.
In the MID state, any move within the radii of the scroll guide should cause it to snap to the cursor.
Any touch ending within the top or bottom radii will snap to that respective edge.