移动优化：使位置通知菜单：绝对可滚动

Question

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

现在我在屏幕的整个宽度上拉伸了小菜单如果用户有更小的设备以获得更好的可用性：

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

一切正常，直到有一件事：我无法在菜单中滚动。使用现代5英寸智能手机水平，最后隐藏3个元素。相反，滚动会影响绝对位置造成的背景。

online demo上的简单演示使其更清晰：我只删除了 hidden-xs 类，因为否则菜单不会出现在行{{1}的小窗口中就像我之前说过的那样。

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

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

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

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');
});

Answer 2

您可以将通知面板设置为可滚动：

.navbar-nav .open .dropdown-menu {
  background-color: #ffffff;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  left: auto;
  position: absolute;
  right: 0;
  z-index: 100;

  // Extra code required

  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* lets it scroll lazy */
  max-height: 500px; //or whatever. Could be 90vh
}

这应该可以正常工作。 希望它有所帮助。

Answer 3

只需在小型设备上使用媒体查询为通知区域指定固定高度，然后设置overflow-y：auto。高度应仅为px。例如，让notification_area是你的div类..

@media (max-width:600px){
.notification_area{
    overflow-y:auto;
    height:300px;
    }
}