水平滚动响应式导航菜单

Question

我试图复制谷歌移动站点的一部分。

http://www.imgur.com/9DdQz.png

他们网站底部附近有一个“地点”菜单，您可以使用手指水平滚动不同选项，然后点击您想要的图标。

我想复制的功能是水平滚动，并保持页面设置为特定宽度，以便窗口不会重新调整大小，从而取消滚动功能。

我尝试使用Chrome的Android远程调试工具获取创建此内容所使用的代码副本，但我找不到该网站此部分的特定代码，我认为它必须通过一个单独的.js文件加载。 我已经进行了足够的谷歌搜索，试图使用另一个搜索字符串的前景与将头撞向砖墙来重新装饰我的工作场所一样。 简而言之，我迷失了方向，深入不可自拔，请求帮助。 任何提示或帮助都将不胜感激。

提前致谢。

- Eponymic

---

也许他们只是隐藏了水平滚动条。 - Dim13i

你有没有真正尝试过自己编写代码，还是只想让别人为你发布一些完成的代码？ 我建议你至少应该尝试一下，然后再放弃并要求别人给你代码。 - Zack

我不是程序员，我是一名市场分析师，我不知道自己在做什么。这些都不在我的工作描述中，也没有自愿参加这个项目。我没有尝试自己写任何东西。我之所以会参与这个项目，只是因为我所在的公司正在推动我担任这个职位来支持他们的首席开发人员。他们支付我的教育费用，并让我做这件事。如果我冒犯了您，请接受我的道歉。 - Eponymic

Answer 1

<div id="scrollcontainer" >
    <div id="scrollplane" >
         <a class="nav" href="?">Link 1</a>
         <a class="nav" href="?">Link 2</a>
         <a class="nav" href="?">Link 3</a>
    </div>
    </div> 

CSS：层叠样式表

#scrollcontainer {
        width: 100%;
        overflow-x: auto; 
        overflow-y: hidden;
        height: // some height
}

#scrollplane { 
 height: // less than scroll container ;
 width: // greater than scroll container;

我建议将链接相对于滚动平面进行定位。这样可以在移动浏览器上达到所需的效果，但会在桌面上显示滚动条。

- syllabix