I have a popup in my navigator that displays a list of notifications. This is a fairly standard code, except for the fact that I have set max-height: 300px;and overflow-y: scroll;the element ul. When browsing on a Mac in Chrome or Firefox, there are no scroll bars until the height reaches> 300 pixels and scroll overflow ul. However, on Windows (Chrome or IE), a vertical scrollbar is always present, which is very annoying. Is there a way to disable the scroll bar in Windows or hide it until it is needed?
Here is the code for the dropdown menu:
<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>
And here is the CSS for the dropdown menu:
.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;
}