title: How does Google hide the horizontal scrollbars on their mobile menu?
body: <p>If you perform a Google search on an iPhone in Safari, Google presents a nice-looking horizontal scrolling menu showing the different search options:</p>
  
  <p><a href="https://i.stack.imgur.com/TDaIv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TDaIv.png" alt="enter image description here"></a></p>
  
  <p>I'm referring to the menu directly under the search query that says "All NEWS IMAGES BOOKS ..." in the screenshot below.</p>
  
  <p>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?</p>
  
  <p>Here is the code from my site where I am attempting to accomplish the same thing:</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.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; } }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="categoryHeader-sub"&gt;
    &lt;ul class="categoryHeader-nav"&gt;
        &lt;li class="categoryHeader-navItem"&gt;&lt;a href="/sup-racks/"&gt;SUP Racks&lt;/a&gt;&lt;/li&gt;
        &lt;li class="categoryHeader-navItem"&gt;&lt;a href="/sup-bags/"&gt;SUP Bags&lt;/a&gt;&lt;/li&gt;
        &lt;li class="categoryHeader-navItem"&gt;&lt;a href="/sup-board-carriers/"&gt;SUP Board Carriers&lt;/a&gt;&lt;/li&gt;
        &lt;li class="categoryHeader-navItem"&gt;&lt;a href="/sup-accessories/"&gt;SUP Accessories&lt;/a&gt;&lt;/li&gt;
        &lt;li class="categoryHeader-navItem"&gt;&lt;a href="/sup-paddles/"&gt;SUP Paddles&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here is a fiddle:</p>
  
  <p><a href="https://jsfiddle.net/flyingL123/wh5u2ntq/1/" rel="nofollow noreferrer">https://jsfiddle.net/flyingL123/wh5u2ntq/1/</a></p>
  
  <p>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.</p>