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


CSS: horizontal scroll in mobile navigation

这是我网站的移动版本。

mobile

我想使sub-nav(Main | Another Long Category |)能够水平滚动。人们可以触摸屏幕并滚动(而不是像在桌面浏览器中那样使用滚动条)。

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

更新：
enter

1
2
3
4
5
6
7
8
$(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类上，您需要添加：

1
2
3
4
5
.subnav{
    overflow-y:hidden;
    overflow-x:scroll;
    -webkit-overflow-scrolling:touch;
}

演示：http://jsfiddle.net/HhHGH/

基本CSS滚动

只需将overflow:scroll添加到您的CSS nav类中即可，也可以使用以下特殊方式：

iOS上的精美CSS滚动

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

这在iOS上效果很好，对于其他设备，请检查以下问题：

-webkit-overflow-scrolling有多少支持：touch

Chrome浏览器Android版不再支持-webkit-overflow-scrolling吗？有替代方法吗？

相关讨论