Google如何隐藏移动菜单上的水平滚动条？

Question

如果您在Safari中的iPhone上执行Google搜索，Google会显示一个漂亮的水平滚动菜单，显示不同的搜索选项：

我指的是直接在搜索查询下面的菜单，上面写着＆＃34;所有新闻图片预订......＆＃34;在下面的屏幕截图中。

如果您在iPhone上水平滚动此菜单，您会注意到滚动时不会显示滚动条。有谁知道Google如何删除默认的iOS滚动条？是CSS吗？ JavaScript的？他们是怎么做到的？

以下是我网站上的代码，我试图完成同样的事情：

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>

这是一个小提琴：

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

将其加载或模拟iPhone，当您水平滚动菜单时，您将看到iOS水平滚动条。我想删除该滚动条。

Answer 1

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