CSS：移动导航中的水平滚动

Question

这是我网站的移动版。

我想让子导航（Main | Another Long Category |）能够水平滚动。人们可以触摸屏幕并滚动（而不是像我们在桌面浏览器中那样使用滚动条）。

怎么做？我不知道效果的名称是什么，因此不知道如何正确描述它。

更新： 我向其添加了overflow-x。但它堆积而不是跨越一行。

这里有什么问题？

Answer 1

<强>更新

根据评论，您需要使用jQuery计算菜单元素的总宽度：

$(function(){
    var menuWidth=0;
    $('.wrapper a').map(function(){
        menuWidth = menuWidth + $(this).outerWidth(true);
    });
    // + 15px to fix, this maybe vary in your project
    $('.wrapper').css('width', (menuWidth+15)); 
});

在容器CSS类中，您需要添加：

.subnav{
    overflow-y:hidden;
    overflow-x:scroll; 
    -webkit-overflow-scrolling:touch;
}

DEMO：http://jsfiddle.net/HhHGH/

基本CSS滚动

只需将overflow:scroll添加到您的CSS nav类或奇特的方式：

iOS上的花式CSS滚动

您可以尝试在CSS nav类中使用-webkit-overflow-scrolling:touch。

这在iOS上运行得很好，其他设备检查这个问题：

How much support is there for -webkit-overflow-scrolling:touch

Chrome Browser for Android no longer supports -webkit-overflow-scrolling? Is there an alternative?