無法獲得溢出-y：滾動到工作

Question

我正在嘗試創建垂直時間軸，但似乎無法使overflow-y: scroll正常工作。這裏是一個鏈接到網站：

http://fosterinnovationculture.com/infographic/index.html

父div有一個overflow: hidden但孩子div有溢出-Y。它正常工作，如果我刪除父div，但我需要它的div內，讓list.js插件正常工作。

Answer 1

我看到你的代碼有

HTML，身體{ 溢出：隱藏; }

//這意味着只有全屏幕和所有溢出隱藏。

因此在.scroll中你需要設置最大高度。我建議解決方案

.scroll { max-height：90vh; }

Answer 2

你固定的body的高度100vh並設置它的溢出屬性值設置爲hidden; 所以無論body的孩子的身高是多少，都不會滾動;

如果更改主體的溢出屬性爲auto，則滾動將工作;

同時您可以將position的top_nav更改爲fixed，以保持搜索欄始終處於最高位置。

Answer 3

看來你似乎在重複同樣的問題。這裏是you asking about同樣的問題（雖然我會承認問題是不同的，因爲它已經改變）。這個問題是my answer。

---

之前給出答覆，我會說，我告訴自己，當編碼CSS是最重要的事情：如果我開始有破解然後我使它太複雜了。

這樣說，首先刪除代碼中的所有overflow: hidden;實例。

然後在那裏得到這樣的：

.top-nav { 
    height: 70px; /* you already specify this on your site */ 
} 
.scroll { 
    position: absolute; 
    top: 70px; 
    bottom: 0px; 
    left: 0px; 
    right: 0px; 
    overflow-y: scroll; 
} 

---

在這樣的情況下，你應該嘗試認識到你的問題對於一個設計，是常見的，別人肯定問過你的問題。如果您無法找到這樣的問題的答案，重新考慮您的搜索關鍵字可能會很好。

這是a Stack Overflow question，回答您的基本「如何」設計問題。