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

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

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

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

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

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

Исправление: в ваш CSS входят -

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}

::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .5);
  box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

/* always show scrollbars */

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}

::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .5);
  box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}


/* css for demo */

#container {
  height: 4em;
  /* shorter than the child */
  overflow-y: scroll;
  /* clip height to 4em and scroll to show the rest */
}

#child {
  height: 12em;
  /* taller than the parent to force scrolling */
}


/* === ignore stuff below, it's just to help with the visual. === */

#container {
  background-color: #ffc;
}

#child {
  margin: 30px;
  background-color: #eee;
  text-align: center;
}

<div id="container">
  <div id="child">Example</div>
</div>

настроить внешний вид по мере необходимости. Источник

Обратите внимание, что на 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 .

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

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

Запустите Системные настройки из меню Apple. Нажмите на «Общие» панели настроек. Найдите «Показать полосы прокрутки» и выберите радиобокс рядом с «Всегда». Закройте системные настройки, когда закончите.