Scrollable tabs, no scrollbar

by godfrzero

HTML

<div class="page-tabs-scrollable">
  <div class="page-tabs">
    <ul class="nav-items">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>

CSS

.page-tabs-scrollable {
  overflow: hidden;
  height: 2rem;
}

.page-tabs {
  overflow: hidden;
  overflow-x: scroll;
  backface-visibility: hidden;
}

.nav-items {
  white-space: nowrap;
  line-height: 2rem;
  background: #00456e;
  color: white;
  list-style-type: none;
  padding: 0;
  display: table-cell;
}

.nav-items li {
  display: table-cell;
  padding: 0 10px;
}

JavaScript

/*
	The height of the .page-tabs-scrollable div has to match that of the .nav-items. The scrollbar is still there, it's just hidden by the overflow: hidden on the .page-tabs-scrollable
  
  The display: table-cell is important! It avoids the need for floats or inline-blocks, while providing the same effect and preventing the list items from wrapping onto a new line.
  
  The key here, is not to have any height on .page-tabs.
*/