jquery - dlmenu 滚动不允许访问最后几个元素

Question

我正在使用 Hipstr Jekyll theme它使用了 jQuery 插件 dlmenu ，响应式菜单。

Hipstr's about page滚动条根本不出现。所以问题略有不同，但我们都没有让它正常工作。有一个 issue on Hipstr here .

结构是nav > ul > li > ul。当我在子子菜单中时，滚动条不会到达最后一个元素。这是与高度和溢出相关的某种问题，我还没有追查是哪个容器导致了这个问题。

我也在努力确保找到一种解决方案，该解决方案不会以将像素与屏幕尺寸耦合的方式对像素进行硬编码。

是什么导致滚动不再向下滚动？

Answer 1

问题 - 或者更准确地说，是混淆的根源 - 大致是外部 nav 元素仅包含具有绝对位置的子元素。因此它没有自己的高度。例如，如果您设置 overflow = scroll，您现在将拥有一个 0px 高的 nav 元素，您可以在其上滚动内容。

最基本的 hack 是放大 nav 的高度，然后按预期使用更熟悉的 max-height 和 overflow 属性。这个 SCSS 似乎有效:

nav#dl-menu {
    @media #{$medium} {
        // The children of this element are absolute, so
        // this has no height of its own. Must prop up
        // before enable overflow:scroll. This is probably
        // still a kludge.
        height: 100%;
        max-height: 90%;
        overflow: scroll;
    }
}