Hide useless scrollbars that show up on Windows only
<p>I have a bootstrap dropdown in my navbar that shows a list of notifications. It's pretty standard code, except that I set <code>max-height: 300px;</code> and <code>overflow-y: scroll;</code> on the <code>ul</code> element. When viewed on a Mac in Chrome or Firefox, there are no scrollbars present until the height reaches > 300px and the <code>ul</code> 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?</p>

<p>Here is the code for the dropdown:</p>

<pre><code>&lt;li class="dropdown notifier"&gt;
    &lt;div class="dropdown-toggle" style="width:initial;"&gt;
        &lt;div class="dropdown-link nav-dropdown-link" id="dropdownMenuNotifications" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
            &lt;i class="fa" ng-class="unreadNotices &gt; 0 ? 'fa-bell-o red' : 'fa-bell-o'" style="position:absolute;right:5px;"&gt;&lt;/i&gt;&amp;nbsp;
            &lt;div class="counter" ng-if="unreadNotices &gt; 0"&gt;{{unreadNotices}}&lt;/div&gt;
        &lt;/div&gt;
        &lt;ul class="dropdown-items dropdown-menu account" aria-labelledby="dropdownMenuNotifications"&gt;
            &lt;li&gt;
                &lt;a href="#" class="title"&gt;&lt;span&gt;Notifications&lt;/span&gt;&lt;/a&gt;
            &lt;/li&gt;
            &lt;li ng-if="notices.length === 0"&gt;
                &lt;a href="#" style="cursor:default;"&gt;
                    &lt;div class="notice-text"&gt;
                        &lt;span&gt;No notifications at the moment&lt;/span&gt;
                    &lt;/div&gt;
                &lt;/a&gt;
            &lt;/li&gt;
            &lt;li ng-repeat-start="n in notices" ng-if="!n.read"&gt;
                &lt;a href="#" class="unread" ng-if="n.action" ng-click="markRead(n, $index);setTab(n.action)"&gt;
                    &lt;div class="icon"&gt;
                        &lt;i class="fa" ng-class="n.icon"&gt;&lt;/i&gt;
                    &lt;/div&gt;
                    &lt;div class="notice-text"&gt;
                        &lt;span&gt;{{n.title}}&lt;/span&gt;
                        &lt;br /&gt;
                        {{n.text}}
                    &lt;/div&gt;
                    &lt;div class="delete-notice"&gt;
                        &lt;i class="fa fa-times" ng-click="$event.stopPropagation();delete(n, $index)"&gt;&lt;/i&gt;
                    &lt;/div&gt;
                &lt;/a&gt;
                &lt;a href="#" class="unread" ng-if="!n.action" ng-click="markRead(n, $index)"&gt;
                    &lt;div class="icon"&gt;
                        &lt;i class="fa" ng-class="n.icon"&gt;&lt;/i&gt;
                    &lt;/div&gt;
                    &lt;div class="notice-text"&gt;
                        &lt;span&gt;{{n.title}}&lt;/span&gt;
                        &lt;br /&gt;
                        {{n.text}}
                    &lt;/div&gt;
                    &lt;div class="delete-notice"&gt;
                        &lt;i class="fa fa-times" ng-click="$event.stopPropagation();delete(n, $index)"&gt;&lt;/i&gt;
                    &lt;/div&gt;
                &lt;/a&gt;
            &lt;/li&gt;
            &lt;li ng-repeat-end="n in notices" ng-if="n.read"&gt;
                &lt;a href="#" ng-if="n.action" ng-click="setTab(n.action)"&gt;
                    &lt;div class="icon"&gt;
                        &lt;i class="fa" ng-class="n.icon"&gt;&lt;/i&gt;
                    &lt;/div&gt;
                    &lt;div class="notice-text"&gt;
                        &lt;span&gt;{{n.title}}&lt;/span&gt;
                        &lt;br /&gt;
                        {{n.text}}
                    &lt;/div&gt;
                    &lt;div class="delete-notice"&gt;
                        &lt;i class="fa fa-times" ng-click="$event.stopPropagation();delete(n, $index)"&gt;&lt;/i&gt;
                    &lt;/div&gt;
                &lt;/a&gt;
                &lt;a href="#" ng-if="!n.action"&gt;
                    &lt;div class="icon"&gt;
                        &lt;i class="fa" ng-class="n.icon"&gt;&lt;/i&gt;
                    &lt;/div&gt;
                    &lt;div class="notice-text"&gt;
                        &lt;span&gt;{{n.title}}&lt;/span&gt;
                        &lt;br /&gt;
                        {{n.text}}
                    &lt;/div&gt;
                    &lt;div class="delete-notice"&gt;
                        &lt;i class="fa fa-times" ng-click="$event.stopPropagation();delete(n, $index)"&gt;&lt;/i&gt;
                    &lt;/div&gt;
                &lt;/a&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
&lt;/li&gt;
</code></pre>

<p>And here is the CSS for the dropdown:</p>

<pre><code>.notifier {
    &amp;: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;
                    &amp;.unread {
                        background: rgba(92, 184, 92, 0.07);
                        color: #333;
                    }
                    &amp;.title {
                        text-align: center;
                        background: #FFF;
                        cursor: default;
                        &amp;:hover {
                            background: #FFF;
                        }
                    }
                    &amp;: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;
                        &amp;: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;
}
</code></pre>