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

Question

我的导航栏中有一个引导下拉列表，显示通知列表。这是非常标准的代码，除了我在ul元素上设置了max-height: 300px;和overflow-y: scroll;。在 Chrome 或 Firefox 的 Mac 上查看时，在高度达到 300 像素之前>没有滚动条并且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;
}

Answer 1

将滚动更改为：

overflow-y: auto;

将其设置为 auto 将仅在需要时才显示滚动条，而scroll建议始终存在滚动条。

您可以使用此示例尝试不同的overflow属性，也可以在 w3schools 上阅读有关它的更多信息。

–

尽管可以考虑使用 -ms-overflow-style 属性（可在 Windows 开发人员中心中找到该属性）：

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

Answer 2

在 Windows 中，滚动条不会自动隐藏。若要仅在需要时以及用户将鼠标悬停在元素上时显示滚动条，可以使用以下代码片段中显示的 css：

.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>