具有垂直滚动元素的水平滚动站点答案

【问题标题】：Horizontal scrolling site with vertical scrolling elements具有垂直滚动元素的水平滚动站点
【发布时间】：2012-12-07 04:22:57
【问题描述】：

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

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

【问题讨论】：

我打赌你需要一些 jquery 模块。

标签： html css scroll horizontal-scrolling

【解决方案1】：

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

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

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

【讨论】：

我试图在没有 JavaScript 的情况下执行此操作，但我设法找到了一个效果很好的解决方案。检查下面的答案。感谢您的建议！
解决方案： jsfiddle.net/RCJuX 我需要从顶部容器元素设置某种固定高度，然后按顺序使用height: 100% 将其传递到树中匹配它。因此，只要有某种固定高度，它似乎就可以正常工作。

【解决方案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>

【讨论】：