我的导航栏中有一个引导下拉列表,显示通知列表.它是非常标准的代码,除了我设置max-height：300px;和溢出-y：滚动;在ul元素上.在Chrome或Firefox的Mac上查看时,在高度达到>之前不会出现滚动条. 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;
如果只需要滚动条,则将其设置为自动将显示滚动条,而滚动则表示应始终存在滚动条.
您可以使用this example玩不同的溢出属性或在w3schools阅读更多相关信息.
–
虽然您可以考虑使用-ms-overflow-style属性,您可以在windows dev center中找到它：
-ms-overflow-style: auto | none | scrollbar | -ms-autohiding-scrollbar
