Question

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

问题：

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

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％不会将滚动引入部分

您必须根据内容为部分指定不同的高度。

通过javascript检查如果截面的高度大于窗口高度，则将窗口高度指定为截面高度。

Answer 2

您可以尝试使用此代码生成带有水平滚动条的固定宽度内容块。您可以看到父帖子here

<html>
<title>HTMLExplorer Demo: Horizontal Scrolling Content</title>
<head>
<style type="text/css">
#outer_wrapper {  
    overflow: scroll;  
    width:100%;
}
#outer_wrapper #inner_wrapper {
    width:6000px; /* If you have more elements, increase the width accordingly */
}
#outer_wrapper #inner_wrapper div.box { /* Define the properties of inner block */
    width: 250px;
    height:300px;
    float: left;
    margin: 0 4px 0 0;
    border:1px grey solid;
}
</style>
</head>
<body>

<div id="outer_wrapper">
    <div id="inner_wrapper">
        <div class="box">
            <!-- Add desired content here -->
            HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript 
        </div>
        <div class="box">
             <!-- Add desired content here -->
            HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript 
        </div>
        <div class="box">
            <!-- Add desired content here -->
            HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript 
        </div>
        <div class="box">
            <!-- Add desired content here -->
            HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript 
        </div>
        <div class="box">
             <!-- Add desired content here -->
            HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript 
        </div>
        <div class="box">
            <!-- Add desired content here -->
            HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript 
        </div>
        <!-- more boxes here -->
    </div>
</div>
</body>
</html>

带有垂直滚动元素的水平滚动网站

2 个答案: