类似谷歌的图标在手机中滚动 - 我该如何复制？

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>

所以这就是我的想法，如果有可能的话，也许有人可能会有所了解：

目前，该网站使用css3媒体查询从1200px宽度扩展到移动版。当移动分辨率加载页面时，我会调整这些图像以堆叠成2列，以便我们有足够的空间来查看每个图像。但是，理想情况下，我希望用户能够用手指水平滚动这些类别，但仍然保持设备的宽度。 （即我希望类别菜单包装器仍然保持移动宽度，并且只允许在该包装器中滚动）

我考虑过创建一组重复的类别div，类似于

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

并显示：none到“非移动”类别包装器，切换到新的移动样式类别。但这有可能吗？谷歌是如何做到的！ div可以滚动（无边框，没有滚动条显示）我想象它可以在移动设备上的方式吗？起初我认为框架背后的功能类似于我想要的功能，但我不想在该“窗口”中加载URL。只是我喜欢的移动菜单。

在移动设备上加载Google时，最接近我可以比较的是Google的图标滚动条：

Answer 1

您应该可以通过在移动媒体查询中明确设置width和overflow-x属性来执行此操作：

@media screen and (device-width: 480px) {
    #category-menu {
        width: 480px;
        overflow-x: scroll;
    }
}