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

Question

我的导航栏中有一个引导下拉列表,显示了一个通知列表.这是非常标准的代码,但我设置max-height: 300px;和overflow-y: scroll;开启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;
}

Answer 1

将滚动更改为:

overflow-y: auto;

将其设置为auto仅在需要时显示滚动条,同时scroll建议应始终使用滚动条.

您可以overflow使用此示例来玩不同的属性,或者在w3schools阅读更多相关信息.

-

虽然你可以考虑使用-ms-overflow-style你可以在windows dev中心找到的属性:

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