html – 隐藏仅在Windows上显示的无用滚动条

我的导航栏中有一个引导下拉列表,显示通知列表.它是非常标准的代码,除了我设置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>&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>

这是下拉列表的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;

-ms-overflow-style: auto | none | scrollbar | -ms-autohiding-scrollbar