html - 侧边栏 overflow-y 仅在屏幕太小而无法查看整个侧边栏时触发

Question

我正在尝试实现像 THIS SITE 这样的侧边栏(左侧的黑色侧边栏，将您的浏览器窗口调小以触发它)。 overflow-y:scroll; 似乎只在没有足够的浏览器空间来查看 sidenav 的整个长度时才起作用。

我试过制作侧边导航并设置它 overflow-y:scroll; 但如果我这样做，它会不断显示滚动条，无论是否需要，所以你最终会像下图这样。 .

知道如何实现它以使其像上面的网站一样运行吗？ - 我在这里做了一个问题的 jsfiddle http://jsfiddle.net/zRvRQ/1/

此处还有示例站点的截屏视频 - 如果您无法加载它 - http://www.youtube.com/watch?v=fI7SFCUnq98&feature=youtu.be

Answer 1

我刚看了你的video .
首先，你的侧边导航应该是固定的，这样它就不会随内容滚动。
接下来 overflow 必须是 auto。也就是说，只有当列表需要滚动时，滚动条才会出现。
我为您创建了一个小示例:
Codepen Demo

希望现在我走在正确的轨道上。

PS:如果您还想为您的 sidenav 自定义滚动条，请查看 this article