我正在尝试创建一个非常像这张图片中的网站:
问题:
- 我需要网站水平滚动,如图中所示。
- 我还需要垂直滚动元素来滚动,但在元素本身内部滚动,而不是整个网站。当我在网站的第一帧向上/向下滚动时,它会向下滚动到一个空白区域,因为第二帧太高了,迫使整个网站与最高元素一样高。
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
属性?听起来很乱。 :/
最佳答案
height=100% 不会给section引入滚动
您必须根据那里的内容为部分分配不同的高度。
通过 javascript 检查如果部分的高度大于窗口高度,则将窗口高度分配给部分高度。
关于html - 具有垂直滚动元素的水平滚动站点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13756885/