У меня есть раскрывающееся меню начальной загрузки на панели навигации, в котором отображается список уведомлений. Это довольно стандартный код, за исключением того, что я установил max-height: 300px; и overflow-y: scroll; в элементе ul. При просмотре на Mac в Chrome или Firefox полосы прокрутки отсутствуют, пока высота не достигнет & gt; 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;
}
23
Daniel Bonnell 18 Фев 2016 в 17:53

2 ответа

Лучший ответ

Измените свой свиток на:

overflow-y: auto;

Если установить для него значение auto, полоса прокрутки будет отображаться только в том случае, если она необходима, а scroll предполагает, что полоса прокрутки должна быть всегда.

Вы можете поиграть с различными свойствами overflow, используя этот пример или прочтите о нем подробнее на странице w3schools .

-

Хотя вы могли бы рассмотреть возможность использования свойства -ms-overflow-style, которое можно найти в центр разработки для Windows :

-ms-overflow-style: auto | none | scrollbar | -ms-autohiding-scrollbar
31
Marian Rick 18 Фев 2016 в 15:04

В 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>
2
tonymayoral 10 Авг 2020 в 21:54