我的导航栏中有一个引导下拉列表，显示通知列表。这是非常标准的代码，除了我设置的max-height: 300px; and overflow-y: scroll; on the ul元素。在 Mac 上的 Chrome 或 Firefox 中查看时，在高度达到 > 300px 之前不会出现滚动条，并且ul溢出卷轴。但在 Windows（Chrome 或 IE）上，垂直滚动条始终存在，这确实很烦人。有什么方法可以关闭 Windows 上的滚动条或隐藏它直到实际需要它吗？
这是下拉列表的代码：
<li class="dropdown notifier">
<div class="dropdown-toggle" style="width:initial;">
<div class="dropdown-link nav-dropdown-link" id="dropdownMenuNotifications" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa" ng-class="unreadNotices > 0 ? 'fa-bell-o red' : 'fa-bell-o'" style="position:absolute;right:5px;"></i>
<div class="counter" ng-if="unreadNotices > 0">{{unreadNotices}}</div>
</div>
<ul class="dropdown-items dropdown-menu account" aria-labelledby="dropdownMenuNotifications">
<li>
<a href="#" class="title"><span>Notifications</span></a>
</li>
<li ng-if="notices.length === 0">
<a href="#" style="cursor:default;">
<div class="notice-text">
<span>No notifications at the moment</span>
</div>
</a>
</li>
<li ng-repeat-start="n in notices" ng-if="!n.read">
<a href="#" class="unread" ng-if="n.action" ng-click="markRead(n, $index);setTab(n.action)">
<div class="icon">
<i class="fa" ng-class="n.icon"></i>
</div>
<div class="notice-text">
<span>{{n.title}}</span>
<br />
{{n.text}}
</div>
<div class="delete-notice">
<i class="fa fa-times" ng-click="$event.stopPropagation();delete(n, $index)"></i>
</div>
</a>
<a href="#" class="unread" ng-if="!n.action" ng-click="markRead(n, $index)">
<div class="icon">
<i class="fa" ng-class="n.icon"></i>
</div>
<div class="notice-text">
<span>{{n.title}}</span>
<br />
{{n.text}}
</div>
<div class="delete-notice">
<i class="fa fa-times" ng-click="$event.stopPropagation();delete(n, $index)"></i>
</div>
</a>
</li>
<li ng-repeat-end="n in notices" ng-if="n.read">
<a href="#" ng-if="n.action" ng-click="setTab(n.action)">
<div class="icon">
<i class="fa" ng-class="n.icon"></i>
</div>
<div class="notice-text">
<span>{{n.title}}</span>
<br />
{{n.text}}
</div>
<div class="delete-notice">
<i class="fa fa-times" ng-click="$event.stopPropagation();delete(n, $index)"></i>
</div>
</a>
<a href="#" ng-if="!n.action">
<div class="icon">
<i class="fa" ng-class="n.icon"></i>
</div>
<div class="notice-text">
<span>{{n.title}}</span>
<br />
{{n.text}}
</div>
<div class="delete-notice">
<i class="fa fa-times" ng-click="$event.stopPropagation();delete(n, $index)"></i>
</div>
</a>
</li>
</ul>
</div>
</li>
这是下拉菜单的 CSS：
.notifier {
&:hover {
background: initial!important;
}
.dropdown-toggle {
.dropdown-link {
padding: 5px 7px 5px 0px;
i {
margin-top: 0;
font-size: 1.5em;
}
}
.dropdown-items {
max-height: 300px;
overflow-y: scroll;
li {
font-size: 0.9em;
a {
position: relative;
max-width: 300px;
white-space: normal;
border-bottom: 2px solid #EEE;
&.unread {
background: rgba(92, 184, 92, 0.07);
color: #333;
}
&.title {
text-align: center;
background: #FFF;
cursor: default;
&:hover {
background: #FFF;
}
}
&:hover {
background: #F7F7F7;
}
.notice-text {
margin-left: 24px;
margin-right: 15px;
span {
font-size: 1.1em;
font-weight: 700;
}
}
.delete-notice {
position: absolute;
top: 5px;
right: 0;
font-size: .9em;
&:hover {
color: #C9302C;
}
}
}
}
}
}
}
.counter {
position: absolute;
top: 0px;
right: 5px;
padding: 0px 5px 0px 5px;
border-radius: 5px;
font-size: .5em;
font-weight: 700;
color: #FFF;
background: #C9302C;
}
将滚动更改为：
overflow-y: auto;
将其设置为auto仅当需要时才会显示滚动条，而scroll建议应该始终有一个滚动条。
你可以玩不同的overflow属性使用或阅读更多相关信息w3学校 http://www.w3schools.com/cssref/pr_pos_overflow.asp.
–
虽然您可以考虑使用-ms-overflow-style属性，您可以在Windows 开发中心 https://msdn.microsoft.com/de-de/library/windows/apps/hh441298.aspx:
-ms-overflow-style: auto | none | scrollbar | -ms-autohiding-scrollbar
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
