I have a bootstrap dropdown in my navbar that shows a list of notifications. It's pretty standard code, except that I set max-height: 300px;
and overflow-y: scroll;
on the ul
element. When viewed on a Mac in Chrome or Firefox, there are no scrollbars present until the height reaches > 300px and the ul
overflow scrolls. On Windows (Chrome or IE) though, the vertical scrollbar is always present, which is really annoying. Is there any way to turn off the scrollbar on Windows or hide it until it's actually needed?
Here is the code for the dropdown:
<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:
.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;
}
Change your scroll to:
overflow-y: auto;
Setting it to auto
will display the scrollbar if its needed only, while scroll
suggests there should always be a scrollbar.
You can play around with different overflow
propertys using this example or read more about it at the w3schools.
–
Although you could consider using the -ms-overflow-style
property, which you can find in the windows dev center:
-ms-overflow-style: auto | none | scrollbar | -ms-autohiding-scrollbar