javascript - 移动优化 : Make notification menu with position:absolute scrollable

Question

我最近买了Moltran这很好但有一个很大的缺点:通知菜单在移动设备上消失，这不适合我。所以我了解到，这可以通过删除 li 通知元素的 hidden-xs 类来完成。这将变成 <li class="dropdown hidden-xs open">至 <li class="dropdown open"> ，效果很好。

现在我将小菜单拉伸(stretch)到屏幕的整个宽度如果用户使用较小的设备以获得更好的可用性:

@media (max-width: 767px) {
    .nav > li.dropdown:not(.hidden-xs).open .dropdown-menu {
        width: 100vw;
    }
}

一切正常，直到出现一件事:我无法在菜单中滚动。使用现代 5"智能手机水平，最后的 3 个元素被隐藏。相反，滚动会影响由绝对位置引起的背景。

关于 online demo 的简单演示为了更清楚:我只删除了 hidden-xs 类，否则菜单不会出现在 <li class="dropdown hidden-xs open"> 行的小窗口上。正如我之前所说。

当窗口非常小时，它无法看到完整的通知菜单并且用户无法滚动到那里:

如您所见，右侧的滚动条位于底部，但您无法完全看到通知，因为滚动条不会影响此菜单。我尝试了一些东西，主要是切换到其他位置类型，因为绝对位置似乎会导致问题。但没有任何效果，似乎我陷入了困境。

所以我的问题是:需要进行哪些更改才能保持功能不变，同时提供一种在较小设备上滚动通知的方法？

Answer 1

嗯。如果我理解正确，你应该设置溢出到你的导航栏。它应该可以解决问题。

.topbar{
    height: 100%;
    background: transparent;
    overflow-y: auto;
}

编辑:这会将顶栏的高度设置为 100%。因此，它将与屏幕上的所有元素重叠。

作为替代方案，您可以在单击通知按钮时添加一个单独的类，并仅在这种情况下设置此元素的样式。例如:

.topbar.notification-open{
    height: 100%;
    background: transparent;
    overflow-y: auto;
}

并使用 jQuery 切换类:

$('.dropdown-toggle').click(function(){
    $(this).closest('.topbar').toggleClass('notification-open');
});