| Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 1 | page.title=Scrolling |
| Scott Main | 36c27c4 | 2013-03-18 14:52:45 -0700 | [diff] [blame] | 2 | page.tags="scrollview","listview" |
| Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 3 | @jd:body |
| 4 | |
| 5 | <p>Scrolling allows the user to navigate to content in the overflow using a swipe gesture. The |
| 6 | scrolling speed is proportional to the speed of the gesture.</p> |
| 7 | <h2 id="indicator">Scroll Indicator</h2> |
| 8 | |
| 9 | <p>Appears during scrolling to indicate what portion of the content is currently in view.</p> |
| 10 | |
| Dirk Dougherty | 0b73403 | 2013-10-19 11:43:41 -0700 | [diff] [blame] | 11 | <div class="framed-nexus5-land-span-13"> |
| Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 12 | <video class="play-on-hover" autoplay> |
| 13 | <source src="{@docRoot}design/media/scroll_indicator.mp4" type="video/mp4"> |
| 14 | <source src="{@docRoot}design/media/scroll_indicator.webm" type="video/webm"> |
| 15 | <source src="{@docRoot}design/media/scroll_indicator.ogv" type="video/ogg"> |
| 16 | </video> |
| 17 | </div> |
| 18 | <div class="figure-caption"> |
| 19 | <div class="video-instructions"> </div> |
| 20 | </div> |
| 21 | |
| 22 | <h2 id="index-scrolling">Index Scrolling</h2> |
| 23 | |
| 24 | <p>In addition to traditional scrolling, a long alphabetical list can also offer index scrolling: a way |
| 25 | to quickly navigate to the items that begin with a particular letter. With index scrolling, a scroll |
| 26 | indicator appears even when the user isn't scrolling. Touching or dragging it causes the current |
| 27 | letter to pop up in a prominent way.</p> |
| 28 | |
| Dirk Dougherty | 0b73403 | 2013-10-19 11:43:41 -0700 | [diff] [blame] | 29 | <div class="framed-nexus5-land-span-13"> |
| Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 30 | <video class="play-on-hover" autoplay> |
| 31 | <source src="{@docRoot}design/media/scroll_index.mp4" type="video/mp4"> |
| 32 | <source src="{@docRoot}design/media/scroll_index.webm" type="video/webm"> |
| 33 | <source src="{@docRoot}design/media/scroll_index.ogv" type="video/ogg"> |
| 34 | </video> |
| 35 | </div> |
| 36 | <div class="figure-caption"> |
| 37 | <div class="video-instructions"> </div> |
| 38 | </div> |