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

【问题标题】：CSS: horizontal scroll in mobile navigationCSS：移动导航中的水平滚动
【发布时间】：2014-03-01 07:11:53
【问题描述】：

这是我网站的移动版本。

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

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

更新：我将overflow-x 添加到它。但它堆叠而不是跨越成一条线。

这里有什么问题？

【问题讨论】：

标签： css

【解决方案1】：

更新

基于 cmets，您需要使用 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;
}

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

基本 CSS 滚动

只需将overflow:scroll 添加到您的 CSS 导航类或花哨的方式：

iOS 上的精美 CSS 滚动

您可以尝试在 CSS 导航类中使用 -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?

【讨论】：

我现在遇到了一个问题.... 导航药片只是堆叠在一起。有什么我可以看到的例子吗？
如果您提供a fiddle 非常乐意提供进一步的帮助。
附加堆栈问题现已解决。我在导航中做了一个包装器，并给它一个 150% 的宽度来破解。
现在的问题是，第一个解决方案是不支持那么多。（我国的手机浏览器情况非常复杂）。我应该用javascript做吗？但是怎么做？
你能提供一个 jsfiddle 来开始原型设计吗？