带有溢出-x的移动导航:隐藏但仍可左右滚动(参见示例)

Question

我正在尝试创建一个导航，以便当显示太小(即移动)并且没有滚动条时，溢出可以左右滚动。

请参见下面的页面，该页面正是这样做的：

https://developers.google.com/cast/

(对于来自未来的游客，请看这里：https://web.archive.org/web/20150814005541/https://developers.google.com/cast/)

我指的导航是：

主页指南>参考示例>支持

如果你使你的浏览器窗口小(或检查移动)，你会发现导航被切断了大约“样本”，但你可以拖动左显示“支持”。在桌面上，您必须单击该区域并使用箭头键实现同样的效果。

它可以在关闭JavaScript时工作，所以这是一个纯CSS解决方案。

在检查CSS时，我可以看到overflow-y:hidden是它和white-space:nowrap的一部分，但是由于overflow-y是指垂直访问，所以我不知道为什么会有这种特性。

Answer 1

CSS overflow-y 属性指定元素内容溢出时顶部/底部边缘的效果。

参考： http://www.w3schools.com/cssref/css3

对于左/右边，使用overflow-x属性。因此，在导航栏中，overflow-y: hidden;属性指定顶部/底部边缘应该隐藏内容。这不会影响左/右滚动边。

通常，如果要创建垂直滚动元素，则可以：

​

#con {
  width: 300px;
  overflow-x: scroll;
  background: orange;
}

#a {
  width: 1200px;
  background: orange;
}

<div id="con">
  <div id="a">
    <h1>Hey there! I'm a big big big big big big big big H1 element</h1>
    <p>How are you? I'm a paragraph. I'm inside an element with <code>overflow-x: scroll</code>. That's cool.</p>
  </div>
</div>

​

希望这能有所帮助。

Answer 2

在这个页面上的例子中有很多变体，虽然我不能百分之百肯定它们中的任何一个都能回答Google在这个例子中是如何做到的问题。

我所寻求的解决方案是允许滚动条默认，只需有一个受高度限制的容器div，从而使滚动条从视图中模糊。

虽然不是最优雅的解决方案，但这避免了许多跨浏览器问题，直到供应商允许设计师更多地控制溢出x和溢出-y如何工作，海事组织。