无法溢出-y：滚动到工作

Question

我正在尝试创建一个垂直时间轴，但我似乎无法让overflow-y: scroll工作。这是该网站的链接：

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

父div有overflow: hidden但子div有溢出-y。它可以正常工作，如果我删除父div，但我需要在div内部，以便list.js插件正常工作。

Answer 1

我看到你的代码有

  

html，body {       溢出：隐藏;   }

//它只表示全屏，所有溢出都被隐藏。

所以在.scroll中你需要设置max-height。我建议一个解决方案

  

.scroll {       最大高度：90vh;   }

Answer 2

您将body的高度固定为100vh，并将其溢出属性的值设置为hidden; 所以无论body的孩子的身高是什么，它都不会滚动;

如果您将body的overflow属性更改为auto，则滚动将起作用;

同时，您可以将position的{​​{1}}更改为top_nav，以便始终将搜索栏保持在最顶层。

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，可以回答您潜在的“操作方法”设计问题。