<!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>