1

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

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容器的属性？听起来很乱。：/

4

2 回答 2

0

height=100% 不会引入滚动到部分

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

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

于 2012-12-07T04:57:28.753 回答
0

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

<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>
于 2014-02-11T18:03:36.083 回答