Hiding WebKit scrollbar when overflow-scrolling: touch is enabled

It seems that currently (as of January 2017) the only way to get around this is by wrapping the scrollable element inside of a parent div and manually hiding the scrollbar from view.

This can be achieved by applying a fixed height/width and overflow: hidden; to the parent div. You can then add extra padding or height/width to the original element to, essentially, push the scrollbar out of view.

Mark Otto tweeted about the issue back in June 2016. Here is an example of his workaround: https://output.jsbin.com/lohiga.

The basic idea goes something like this:

<header>
  <div> <!-- parent wrapper added -->
    <nav>
      <a href="#">First link</a>
      <a href="#">Link</a>
      <a href="#">Link</a>
      <a href="#">Link</a>
      <a href="#">Link</a>
      <a href="#">Link</a>
      <a href="#">Link</a>
      <a href="#">Link</a>
      <a href="#">Last link</a>
    </nav>
  </div>
</header>

CSS:

header {
  margin: 20px 0;
  padding: 10px 5px;
  text-align: center;
  background-color: #f5f5f5;
  border-bottom: 1px solid #ddd;
}

// Parent wrapper
div {
  height: 30px;
  overflow-y: hidden; // "crop" the view so the scrollbar can't be seen
}

// Original scrollable element
nav {
  padding-bottom: 20px; // extra padding to push the scrollbar out of view
  overflow-x: auto;
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

nav a {
  display: inline-block;
  padding: 5px 10px;
}