index.html 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Scrolling</title>
  6. <meta name="description" content="Vertically slide text, images and/or video across the device's display">
  7. <link rel="stylesheet" href="../scrolling.css">
  8. <!--
  9. This <style> and <link> is only used for the example code, is no needed for the real case use
  10. -->
  11. <style>
  12. html, body {
  13. margin: 0;
  14. padding: 0;
  15. font-size: 10px;
  16. background-color: #fff;
  17. }
  18. body {
  19. background: none;
  20. }
  21. body[role="application"] nav[data-type="scrollbar"] p {
  22. opacity: 1;
  23. }
  24. body[role="application"] nav[data-type="scrollbar"] {
  25. top: 6.8rem;
  26. }
  27. </style>
  28. </head>
  29. <body role="application">
  30. <section role="region" id="main">
  31. <nav data-type="scrollbar">
  32. <p>A</p>
  33. <ol>
  34. <li><a href="#"><span class="pack-icon-search">Search</span></a></li>
  35. <li><a href="#"><span class="pack-icon-favorites">favorites</span></a></li>
  36. <li><a href="#">A</a></li>
  37. <li><a href="#">B</a></li>
  38. <li><a href="#">C</a></li>
  39. <li><a href="#">D</a></li>
  40. <li><a href="#">E</a></li>
  41. <li><a href="#">F</a></li>
  42. <li><a href="#">G</a></li>
  43. <li><a href="#">H</a></li>
  44. <li><a href="#">I</a></li>
  45. <li><a href="#">J</a></li>
  46. <li><a href="#">K</a></li>
  47. <li><a href="#">L</a></li>
  48. <li><a href="#">M</a></li>
  49. <li><a href="#">N</a></li>
  50. <li><a href="#">O</a></li>
  51. <li><a href="#">P</a></li>
  52. <li><a href="#">Q</a></li>
  53. <li><a href="#">R</a></li>
  54. <li><a href="#">S</a></li>
  55. <li><a href="#">T</a></li>
  56. <li><a href="#">U</a></li>
  57. <li><a href="#">V</a></li>
  58. <li><a href="#">W</a></li>
  59. <li><a href="#">X</a></li>
  60. <li><a href="#">Y</a></li>
  61. <li><a href="#">Z</a></li>
  62. <li><a href="#">#</a></li>
  63. </ol>
  64. </nav>
  65. </section>
  66. </body>
  67. </html>