Javascript 谷歌如何隐藏移动菜单上的水平滚动条？

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

我指的是搜索查询下的菜单，在下面的屏幕截图中显示“所有新闻图片书籍…”

如果在iPhone上水平滚动此菜单，您会注意到滚动时不会出现滚动条。有人知道谷歌是如何删除默认的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>

这是一把小提琴：

---

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

您能在尝试重新创建滚动条的地方提供代码吗？请编辑问题，将其限制为特定问题，并提供足够详细的信息，以确定适当的答案。请提供您如何尝试解决该问题的详细信息。请参阅页面以获得澄清此问题的帮助。可能的重复版本适用于Chrome，但不适用于我的mobile Safari。为什么会这样？我需要将此应用于特定元素，这是正确的方法吗：

.categoryHeader nav:：-webkit scrollbar{display:none；}

我不明白我缺少了什么，但这并没有为我隐藏滚动条。不在移动Chrome或移动Safari上。

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