CSS-переполнение: прокрутка; - всегда показывать вертикальную полосу прокрутки?

в настоящее время у меня есть:

#div {
  position: relative;
  height: 510px;
  overflow-y: scroll;
}

однако я не считаю, что для некоторых пользователей будет очевидно, что там больше контента. Они могут прокручивать страницу вниз, не зная, что мой div на самом деле содержит намного больше контента. Я использую высоту 510px, чтобы он отрезал какой-то текст, поэтому на некоторых страницах он выглядит так, что есть больше контента, но это не работает для всех из них.

Я использую Mac, а в Chrome и Safari вертикальная полоса прокрутки будет показывать только когда мышь находится над Div и вы активно прокручиваете. Есть ли способ всегда иметь его отображение?

4 ответов


просто столкнулся с этой проблемой сам. OSx Lion скрывает полосы прокрутки, пока не используется, чтобы сделать его более "гладким", но в то же время возникает проблема, которую вы рассмотрели: люди иногда не могут видеть, имеет ли div функцию прокрутки или нет.

исправление: в ваш css включить -

@media(device-width: 768px) and (device-height: 1024px){
    ::-webkit-scrollbar {
        -webkit-appearance: none;
        width: 7px;
    }
    ::-webkit-scrollbar-thumb {
        border-radius: 4px;
        background-color: rgba(0,0,0,.5);
        -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
    }
}

настройка apperance по мере необходимости. источник


обратите внимание на iPad Safari, решение NoviceCoding не будет работать, если у вас есть -webkit-overflow-scrolling: touch; где-то в вашем CSS. Решением является либо удаление всех вхождений -webkit-overflow-scrolling: touch; или ставишь -webkit-overflow-scrolling: auto; С Решение NoviceCoding по.


Это будет работать с iPad на Safari на iOS 7.1.x из моего тестирования я не уверен в iOS 6. Однако, он не будет работать в Firefox. Существует плагин jQuery, который стремится быть совместимым с кросс-браузером под названием jScrollPane.

кроме того, есть дублировать сообщение здесь при переполнении стека, который имеет некоторые другие детали.


Это заставит полосы прокрутки всегда отображаться, когда есть содержимое в windows, которое должно быть прокручено для доступа, это относится ко всем окнам и всем приложениям на Mac:

запуск системы преференций от  меню Apple Нажмите на панель" Общие " настройки Искать показать полосы прокрутки и выберите переключатель рядом с "Всегда" Закройте из Системных настроек, когда закончите