html - モバイルでの Google のようなアイコンのスクロール -- どうすれば複製できますか?

Question

上に、スタックされた div が左に浮いているイメージが表示されます。現在のマークアップは次のとおりです。

<nav id="category-menu">
 <div class="category-top-row">
  <a href="categories/category-name">
   <div id="category-menu-button">Category Example
   </div>
  </a>
  <a href="categories/category-name">
   <div id="category-menu-button">Category Example
   </div>
  </a>
  <a href="categories/category-name">
   <div id="category-menu-button">Category Example
   </div>
  </a></div><!-- /#category-top-row-->
 <div class="category-bottom-row">
   <a href="categories/category-name">
    <div id="category-menu-button">Category Example
    </div>
   </a>
   <a href="categories/category-name">
    <div id="category-menu-button">Category Example
    </div>
   </a>
 </div><!-- /#category-bottom-row-->
</nav>

これが私が考えていることです。これが可能であれば、誰かが光を当てることができるかもしれません:

現在、Web サイトは幅 1200 ピクセルから、css3 メディア クエリを使用してモバイルにまで縮小されています。モバイルの解像度でページが読み込まれると、それらの画像が 2 列に積み重なるように調整して、それぞれが表示される十分なスペースを確保します。ただし、理想的には、ユーザーが指でこれらのカテゴリを水平方向にスクロールできるようにしたいと考えていますが、それでもデバイスの幅に忠実なままです。(つまり、カテゴリ メニュー ラッパーでモバイルの幅を維持し、そのラッパーでのスクロールのみを許可したい)

私は、次のようなカテゴリ div の複製セットを作成することを考えていました

<nav id="category-menu-mobile">
....
etc

display:none を「非モバイル」カテゴリ ラッパーに追加し、新しいモバイル スタイルのカテゴリに切り替えます。しかし、これは可能性さえありますか？Google はどのようにそれを行いますか。モバイルデバイスで想像している方法で、divをスクロール可能(ボーダーレスでスクロールバーが表示されない)にすることはできますか? 最初は、フレームの背後にある機能は私が望んでいたものと似ていると思いましたが、その「ウィンドウ」に U​​RL をロードしたくありません。私の派手なモバイルメニューです。

私が比較できる最も近いものは、モバイル デバイスで Google をロードするときの Google のアイコン スクローラーです。