移动优化:使通知菜单与位置:绝对滚动

Question

我最近买了莫特兰，这很好，但有一个很大的缺点:通知菜单消失在移动设备上，这对我来说不合适。因此，我了解到，可以删除li notification元素的隐藏-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英寸智能手机水平，三个元素在结尾被隐藏。相反，滚动将影响背景造成的绝对位置。

在在线演示上做一个简单的演示，以便更清楚地说明:我只删除了类隐藏-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');
});

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

只需给你的通知区域一个固定的高度，在小型设备上进行媒体查询，并设置溢出-y:auto。高度应仅在px。例如，让notification_area是您的div类。

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