Scrolling 2.0 implementation

This article gives you all you need to implement v2.0 scrolling in your own app.

Live sample

The following gives you an idea of what the rendered scrolling section would look like.

Code

Here is the code you'll need.

CSS

<link href="(your styles folder)/style/scrolling.css" rel="stylesheet" type="text/css">

The CSS can be found in the Gaia project 2.0 branch under shared/style/scrolling.css. Copy this into your own project, along with the associated resources.

HTML

Note: The CSS inside the <style> element isn't needed for the implementation: it is just for the purposes of this example.

<!doctype html>
<html>
<head>
  <link href="https://mdn.github.io/gaia-2.0-bb/scrolling.css" rel="stylesheet" type="text/css">
  <link href="https://gaia-components.github.io/gaia-icons/gaia-icons-embedded.css" rel="stylesheet" type="text/css">
  <style>
    html, body {
      margin: 0;
      padding: 0;
      font-size: 10px;
      font-family: sans-serif;
      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>
<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>

Live sample

Code

CSS

HTML

Document Tags and Contributors