How does Google hide the horizontal scrollbars on their mobile menu?

Question

If you perform a Google search on an iPhone in Safari, Google presents a nice-looking horizontal scrolling menu showing the different search options:

I'm referring to the menu directly under the search query that says "All NEWS IMAGES BOOKS ..." in the screenshot below.

If you scroll this menu horizontally on your iPhone, you will notice that no scroll bars appear as you scroll. Does anyone know how Google is removing the default iOS scroll bars? Is it CSS? Javascript? How do they do it?

Here is the code from my site where I am attempting to accomplish the same thing:

CSS

.categoryHeader-sub {
  position: relative;
  padding: 1rem;
  background-color: #f8f8f8;
  margin-left: -0.625rem;
  margin-right: -0.625rem; }
  @media screen and (min-width: 37.0625em) {
    .categoryHeader-sub {
      margin-left: -0.78125rem;
      margin-right: -0.78125rem; } }
  @media screen and (min-width: 59.5em) {
    .categoryHeader-sub {
      margin-left: -0.9375rem;
      margin-right: -0.9375rem; } }
  @media screen and (min-width: 59.5em) {
    .categoryHeader-sub {
      margin-left: 0;
      margin-right: 0;
      background-color: transparent;
      padding-bottom: 0px; } }

.categoryHeader-nav {
  list-style-type: none !important;
  margin: 0;
  overflow: auto;
  white-space: nowrap;
  padding-bottom: 1px;
  text-align: center;
  -webkit-overflow-scrolling: touch; }
  .categoryHeader-nav::before, .categoryHeader-nav::after {
    content: ' ';
    display: table; }
  .categoryHeader-nav::after {
    clear: both; }
  @media screen and (min-width: 59.5em) {
    .categoryHeader-nav {
      white-space: normal; } }

.categoryHeader-navItem {
  display: inline-block;
  margin-right: 10px; }
  @media screen and (min-width: 59.5em) {
    .categoryHeader-navItem {
      margin-bottom: 1rem; } }
  .categoryHeader-navItem a {
    display: inline-block;
    text-align: center;
    line-height: 1;
    cursor: pointer;
    -webkit-appearance: none;
    transition: background-color 0.25s ease-out, color 0.25s ease-out;
    vertical-align: middle;
    border: 1px solid transparent;
    border-radius: 0px;
    padding: 0.85em 1em;
    margin: 0 0 1rem 0;
    font-size: 0.9rem;
    border: 1px solid #8a8a8a;
    color: #8a8a8a;
    margin-bottom: 0; }
    [data-whatinput='mouse'] .categoryHeader-navItem a {
      outline: 0; }
    .categoryHeader-navItem a, .categoryHeader-navItem a:hover, .categoryHeader-navItem a:focus {
      background-color: transparent; }
    .categoryHeader-navItem a:hover, .categoryHeader-navItem a:focus {
      border-color: #454545;
      color: #454545; }
    .categoryHeader-navItem a:hover {
      text-decoration: none; }
      [data-whatinput="touch"] .categoryHeader-navItem a:hover {
        color: #8a8a8a;
        border-color: #8a8a8a; }
      @media screen and (min-width: 59.5em) {
        .categoryHeader-navItem a:hover {
          color: #fefefe;
          background-color: #8a8a8a; } }

HTML

<div class="categoryHeader-sub">
  <ul class="categoryHeader-nav">
      <li class="categoryHeader-navItem"><a href="/sup-racks/">SUP Racks</a></li>
      <li class="categoryHeader-navItem"><a href="/sup-bags/">SUP Bags</a></li>
      <li class="categoryHeader-navItem"><a href="/sup-board-carriers/">SUP Board Carriers</a></li>
      <li class="categoryHeader-navItem"><a href="/sup-accessories/">SUP Accessories</a></li>
      <li class="categoryHeader-navItem"><a href="/sup-paddles/">SUP Paddles</a></li>
  </ul>
</div>

And here is a fiddle:

https://jsfiddle.net/flyingL123/wh5u2ntq/1/

Load it on or simulating an iPhone and you will see the iOS horizontal scroll bar as you scroll the menu horizontally. I would like to remove that scrollbar.

can you provide your code where you have tried to recreate this? Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Kindly provide details of how you have tried to solve the problem. See the [How to Ask](https://stackoverflow.com/help/how-to-ask) page for help clarifying this question. — viCky, Jul 11 '17 at 04:54
Possible duplicate of [Hide scroll bar, but still being able to scroll](https://stackoverflow.com/questions/16670931/hide-scroll-bar-but-still-being-able-to-scroll) — viCky, Jul 11 '17 at 04:59

score 0 · Answer 1 · edited Jul 11 '17 at 14:59

0

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

edited Jul 11 '17 at 14:59

msanford

11,803
11
66
93

answered Jul 11 '17 at 14:20

Boris

602
2
8
29

1

This works for Chrome but isn't working for me on mobile Safari. Why would that be? I need this to apply to a specific element, is this the correct way to do it: `.categoryHeader-nav::-webkit-scrollbar { display: none; }` – flyingL123 Jul 11 '17 at 14:30
1

I don't understand what I'm missing, but this isn't hiding the scrollbars at all for me. Not on mobile Chrome or mobile Safari. – flyingL123 Jul 12 '17 at 19:58

How does Google hide the horizontal scrollbars on their mobile menu?

1 Answers1