在水平过渡布局中独立滚动页面

Question

我正在构建一个具有水平过渡布局的网站（html / css / jquery），这里有一个示例：http://codepen.io/anon/pen/eqBGb。 实际上它是一个移动到指定ID的单个div。

我的问题是，因为它是一个单独的div，它总是具有相同的高度并且总是溢出，即使我只有一个带有大量文本的“页面”（id）。

如何实现最终结果http://imakewebthings.com/jquery-waypoints/，其中每个页面都有独立的滚动量？

Answer 1

http://codepen.io/anon/pen/cpBfI

你需要强制“身高：100％;”在.contentbox之前的每个元素上，因此它将是唯一的元素，内容溢出（因为只有它可以具有超过100％的维度）。之后，.contentbox需要将溢出设置为auto，因此当其内容大于具有屏幕尺寸的元素时，它可以拥有自己的滚动条。

修改 http://codepen.io/anon/pen/tcDGr

导航栏仍然存在问题。它不应该固定在这个设计中，因为整个身体根本不动。让它定位绝对在这里更好。不过，内容还在其中。

我的解决方案是将.contentbox-wrapper的顶部填充设置为导航栏的大小，并应用适当的box-sizing将其保持在100％高度。