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

225

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

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

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

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

css macos scroll overflow Jambo
источник
4
Хм, вы можете воссоздать это точное поведение на jsfiddle ? Предоставленный вами CSS должен заставить полосу прокрутки присутствовать постоянно.
sg3s
1
Да, звучит так, как будто у вас есть некоторые другие причуды CSS, вызывающие это, это должно всегда отображать полосу прокрутки. Удостоверьтесь, что упаковка div это правильно оформлена.
Шон Стюард,
Я бегу лев! Может это все? Я открою виртуальную машину и посмотрю, как она выглядит на стороне Windows вещей ...
Джамбо
1
Блин мой плохой! Это особенность во Льве. Я должен действительно прочитать то, что я покупаю, прежде чем я куплю это ... Спасибо, ребята!
Джамбо

Ответы:

386

Просто столкнулся с этой проблемой сам. 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);
}

Показать фрагмент кода

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

NoviceCoding
источник
6
Должно ли это работать на iPad с Safari? Я на iPad 2 под управлением iOS 6.1.3, и он не работает.
crmpicco
6
Есть ли способ сделать это применимо только для определенного класса?
футбол
2
Работал для меня только после того, как я установил «overflow: auto» для контейнера (в моем случае, <ul>). Спасибо!
Роб Кэмпион
8
@futbolpal да, похоже, это работает в классе; попробуйте .classname :: - webkit-scrollbar
Погоня за
4
как я могу заставить это работать горизонтально? полоса отображается для вертикальной прокрутки, но не для горизонтальной прокрутки
BritishSam
14

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

Разан Пол
источник
3
Возможно ли иметь в нашей css - webkit-overflow-scrolling: touch и полосы прокрутки?
Julsy
1

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

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

JStarcher
источник
5
Имейте в виду, что этот вопрос был задан 2 года назад, еще до того, как появилась iOS6.
OGHaza
webkit - это только Safari Chrome. Вам нужно будет нацелиться на конкретный движок Firefox
TigerBear
-4

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

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

Мишель
источник
18
Это действительно отвечает на вопрос, но это скорее исправление на стороне клиента, чем исправление на стороне сервера. Так что это то, что должен делать пользователь веб-страницы, stackoverflow - это сайт для программирования, поэтому люди обычно приходят сюда, чтобы найти решение для кода, а не для того, чтобы пользователь мог изменить настройки своего браузера.
Эрик Лещинский