X-Scroll

The X-Scroll component classes allow a list of items to be displayed inline on mobile screens and overflow the page. A horizontal scrollbar appears that lets the user scroll the container to see the entire list.

You can apply X-Scroll with only two classes: a .xScroll class on the container and a .xScroll__items on the item container. Use .xScroll__above on any elements that should not be covered by the mask.

<div class="xScroll">
  <h2 class="xScroll__above">Scroll Items</h2>
  <ul class="xScroll__items">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
</div>

Filters:

At School

At Work

In Your Backyard

In Your Home

On The Road

On The Water

Javascript

Some optional progressive enhancement javascript can be added to improve user experience: x-scroll.js.

Centering an Active Item

If any children of .xScroll__items has either a --active modifier or is a checkbox or radio with the [checked] attribute, the list will scroll to place that child in the center of the container.

<div class="xScroll">
  <ul class="xScroll__items">
    <li>Item 1</li>
    <li>Item 2</li>
    <li class="any-class--active">Item 3</li>
    <li>Item 4</li>
  </ul>
</div>

End Gradients

A transparent-to-white gradient is applied on either side of the list container if there is more content off-screen. As the user scrolls to the end, the gradient fades away until disappearing once the container is scrolled to the end.

The gradient color defaults to white, but it can be customized with --maskColor CSS variable:

.xScroll__items {
  --maskColor: #c2c2c2;
}

OR

<ul class="xScroll__items" style="--maskColor: #c2c2c2"></ul>