水平滚动的网站与垂直滚动元素

问题：

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

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

来源

2012-12-07 Andy Merskin

我敢打赌，你需要一些jQuery模块。 – bgmCoder

高度= 100％不会引入滚动到部分

你必须在不同高度分配给基于有内容的部分。

Check by javascript如果部分的高度大于窗口高度，则将窗口高度分配给部分高度。

来源

2012-12-07 04:57:28

我试图在没有JavaScript的情况下做到这一点，但我设法找到了一个很好的解决方案。检查下面的答案。感谢您的建议！ –

**解决方案：** http://jsfiddle.net/RCJuX/ 我需要从顶部容器元素设置某种固定高度，然后使用'height：100 ％'以匹配它。所以只要有某种**固定的**高度，它似乎工作正常。 –

您可以尝试使用此代码来生成具有水平滚动条的固定宽度内容块。你可以看到父母的帖子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>

来源

2014-02-11 18:03:36 FrameWorker

水平滚动的网站与垂直滚动元素

回答

相关问题