水平滾動的網站與垂直滾動元素

問題：

我需要的網站如圖中所示，水平滾動。
我也需要垂直滾動的元素來滾動，但在元素本身，而不是整個網站。當我在站點的第一幀中向上/向下滾動時，它會滾動到一個空白區域，因爲第二幀太高，並且強制整個站點與最高的元素一樣高。

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

水平滾動的網站與垂直滾動元素

回答

相關問題