html - 具有垂直滚动元素的水平滚动站点

Question

我正在尝试创建一个非常像这张图片中的网站:

Layout Image on Dropbox

问题:

• 我需要网站水平滚动，如图中所示。
• 我还需要垂直滚动元素来滚动，但在元素本身内部滚动，而不是整个网站。当我在网站的第一帧向上/向下滚动时，它会向下滚动到一个空白区域，因为第二帧太高了，迫使整个网站与最高元素一样高。

HTML 结构:

div #horizontal-container
    div #horizontal-wrapper
        div #section-1 .section
        div #section-2 .section
        div #section-3 .section
        so on...

CSS:

html, body {
    overflow: hidden;
}

#horizontal-container {
    position: fixed;
    top: 0; bottom: 0; left: 0; right: 0;
    overflow-y: hidden;
    overflow-x: scroll;
}

#horizontal-wrapper {
    width: 400%;
    height: 100%;
}

.section {
    width: 25%; /* A quarter of its parent with 400%, to be 100% of the window. */
    height: 100%;
    float: left;
    overflow-y: scroll;
}

希望我在这里说清楚了。我缺少什么才能使它正常工作？当我点击某些水平滚动点时，我是否应该加入一些 JavaScript 来切换容器的 overflow 属性？听起来很乱。 :/

Answer 1

height=100% 不会给section引入滚动

您必须根据那里的内容为部分分配不同的高度。

通过 javascript 检查如果部分的高度大于窗口高度，则将窗口高度分配给部分高度。