Hide useless scrollbars that show up on Windows only

Question

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>&nbsp;
            <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;
}

Answer 1

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

Answer 2

In Windows, the scroll bar is not hidden automatically. To show the scroll bar only when needed and when the user hovers the mouse over the element, you can use the css shown in the following snippet:

.myContainer {
  overflow-y: hidden !important;
}

.myContainer:hover {
  overflow-y: auto !important;
}

<div class="myContainer" style="width:150px;height:150px">
  <ul>hover me</ul>
  <ul>hover me</ul>
  <ul>hover me</ul>
  <ul>hover me</ul>
  <ul>hover me</ul>
  <ul>hover me</ul>
  <ul>hover me</ul>
  <ul>hover me</ul>
</div>