123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>Scrolling</title>
- <meta name="description" content="Vertically slide text, images and/or video across the device's display">
- <link rel="stylesheet" href="../scrolling.css">
- <!--
- This <style> and <link> is only used for the example code, is no needed for the real case use
- -->
- <style>
- html, body {
- margin: 0;
- padding: 0;
- font-size: 10px;
- background-color: #fff;
- }
- body {
- background: none;
- }
- body[role="application"] nav[data-type="scrollbar"] p {
- opacity: 1;
- }
- body[role="application"] nav[data-type="scrollbar"] {
- top: 6.8rem;
- }
- </style>
- </head>
- <body role="application">
- <section role="region" id="main">
- <nav data-type="scrollbar">
- <p>A</p>
- <ol>
- <li><a href="#"><span class="pack-icon-search">Search</span></a></li>
- <li><a href="#"><span class="pack-icon-favorites">favorites</span></a></li>
- <li><a href="#">A</a></li>
- <li><a href="#">B</a></li>
- <li><a href="#">C</a></li>
- <li><a href="#">D</a></li>
- <li><a href="#">E</a></li>
- <li><a href="#">F</a></li>
- <li><a href="#">G</a></li>
- <li><a href="#">H</a></li>
- <li><a href="#">I</a></li>
- <li><a href="#">J</a></li>
- <li><a href="#">K</a></li>
- <li><a href="#">L</a></li>
- <li><a href="#">M</a></li>
- <li><a href="#">N</a></li>
- <li><a href="#">O</a></li>
- <li><a href="#">P</a></li>
- <li><a href="#">Q</a></li>
- <li><a href="#">R</a></li>
- <li><a href="#">S</a></li>
- <li><a href="#">T</a></li>
- <li><a href="#">U</a></li>
- <li><a href="#">V</a></li>
- <li><a href="#">W</a></li>
- <li><a href="#">X</a></li>
- <li><a href="#">Y</a></li>
- <li><a href="#">Z</a></li>
- <li><a href="#">#</a></li>
- </ol>
- </nav>
- </section>
- </body>
- </html>
|