Question

所以我做了一个固定的下拉菜单，改为移动汉堡包菜单。桌面上的一切正常，但在移动设备上我无法滚动菜单项。我已尝试了大量的建议修复，但没有一个修复我的问题。我遇到的大多数修复程序都包含以下某种形式，但没有奏效：

max-height: 300px;
overflow-y: scroll;

这是我现在所掌握的一个小提琴：

https://jsfiddle.net/doitliketyler/2gqd0hLs/3/

黑色方块是移动汉堡包按钮。有谁知道如何让这种方式适用于移动设备？任何帮助将不胜感激。非常感谢。

Answer 1

静态位置会阻止滚动。因此，要解决此问题，您必须将菜单设置为类似于移动设备的位置。

因此，对于.header媒体查询中的@media only screen and (max-width:960px)选择器，请将该位置设置为相对位置。

@media only screen and (max-width: 960px) {
    .header {
        padding-bottom: 0;
        position: relative;
    }
}

修改1： 要保留固定菜单，一个选项是将下拉部分设置为绝对位置，溢出为y。

@media only screen and (max-width: 960px)
    .header .header__column--navigation {
        margin-top: 80px;
        position: absolute; //Added
        min-height: calc(100vh - 110px); //Added: set the second parameter of calc to the height of your header. ex: https://c.flm.pw/2018-06/6oiip.png
        height: 100%; //Added: Tell the absolute div to take up as much height as it needs.
        overflow-y: auto; //Added: Make the absolute div have the ability to scroll, but hide the scrollbar when it doesn't.
    }
}

无法滚动固定标题内的移动下拉菜单

1 个答案: