Question

我正在尝试复制谷歌移动网站的一部分。

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

网站底部附近的区域有“地点”菜单，您可以用手指水平滚动浏览不同的选项，然后点按您想要的图标。

我要复制的功能是水平滚动，同时保持页面设置为特定宽度，因此窗口不仅会重新调整大小，从而取消滚动功能。

我尝试使用针对Chrome的Android远程调试工具获取用于创建此代码的代码的副本，但我找不到该网站的这一部分的具体代码，我认为它必须通过单独的.js文件。我也做了足够多的谷歌搜索，尝试另一个搜索字符串的前景与将我的头撞入砖墙以试图重新调整我的工作地点的水平相同。简而言之，我迷失了自己的深度，并寻求帮助。任何指针或帮助将不胜感激。

提前致谢。

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;

}

然后我会建议在滚动平面上相对定位链接。这应该可以在移动浏览器上实现所需的效果，但会在桌面上显示滚动条

水平滚动响应导航菜单

1 个答案: