Hiding WebKit scrollbar when overflow-scrolling: touch is enabled

Question

As we all know, you can hide a scrollbar in Safari and Chromium with the following CSS snippet:

::-webkit-scrollbar {
  display: none;
}

However, this doesn't seem to work when -webkit-overflow-scrolling is set to touch, specifically on iOS. Chromium properly hides the scrollbar.

Is this a WebKit bug, or is there a way to hide a scrollbar AND enable fluid (touch) scrolling? It seems to be possible (perhaps with js?), on the mobile version of Google. Looking through the page source and googling my answer didn't seem to help though.

Answer 1

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;
}