无法获得溢出-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，回答您的基本“如何”设计问题。