Wie versteckt Google die horizontalen Bildlaufleisten in ihrem mobilen Menü?

Question

Wenn Sie eine Google-Suche auf einem iPhone in Safari, Google präsentiert ein gut aussehende horizontales Scrollen Menü zeigt die verschiedenen Suchoptionen ausführen:

Ich beziehe mich auf das Menü direkt unter dem Suchbegriff das sagt "Alle NEWS IMAGES BOOKS ..." im Screenshot unten.

Wenn Sie dieses Menü horizontal auf Ihrem iPhone scrollen, werden Sie feststellen, dass beim Scrollen keine Bildlaufleisten angezeigt werden. Weiß jemand, wie Google die standardmäßigen iOS-Bildlaufleisten entfernt? Ist es CSS? Javascript? Wie machen Sie das?

Hier ist der Code von meiner Seite, wo ich das Gleiche zu erreichen bin versucht:

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> 

Und hier ist eine Geige :

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

Laden Sie es auf oder simulieren Sie ein iPhone und Sie sehen die horizontale Bildlaufleiste von iOS, während Sie horizontal durch das Menü blättern. Ich möchte diese Bildlaufleiste entfernen.

Answer 1

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