Как в CSS сделать так, чтобы всегда была видна полоса прокрутки?
В браузерах, например Firefox, в первые несколько секунд подсвечивается полоса прокрутки, затем пропадает. Можно ли сделать так, чтобы полоса прокрутки не пропадала?
Помогите пожалуйста!
Скрины
<div class="scrollbar-dynamic"> 123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br> </div> |
<div class="scrollbar-dynamic"> 123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br> </div>
.scrollbar-dynamic { overflow-y: scroll; overflow-x: hidden; max-height: 150px; } |
.scrollbar-dynamic { overflow-y: scroll; overflow-x: hidden; max-height: 150px; }
https://jsfiddle.net/jayLne02/
Дополнительно:
Ответы:
Скорее всего стоит какое-то расширение или в https://jsfiddle.net/jayLne02/ не весь код. Полоса прокрутки в файрфоксе выглядит вот так:
ну либо это мобильный файрфокс и там ничего не сделать.
- Зависит от операционной системы и настроек.
- мой скрин тоже в Firefox. Как видно, не работает этот код.
- Diversia, код из вопроса я не менял. Проблема либо в ОС (в маках и мобильных ОС скролл примерно как на картинке и пропадает, если не трогать), либо а плагинах.
Включить себе — Settings > General > Browsing > Always show scrollbars.
Включить через CSS всем пользователям вашего сайта нельзя.
- В это был и вопрос. Как через CSS включить? Мы же про CSS, включать пользователям - не вариант.
- Diversia,
Включить через CSS всем пользователям вашего сайта нельзя.
- Lynn «Кофеман», почему нельзя ? я впервые с таким сталкиваюсь что у кого-то скролл не отображается, хм даже интересно
Diversia, а только с этим блоком проблемы, если задать ему фиксированную высоту - измениться ли результат ?
<div class="scrollbar-dynamic"> 123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br> </div>
<div class="scrollbar-dynamic"> 123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br> </div>
- szQocks, тонкий пропадающий скролл это дефолтная фича MacOS. Так же встречается в некоторых DE в линукс (например у меня на Linux Mint).
- Lynn «Кофеман», хм, сама ОС предоставляет полосу прокрутки для браузеров некоторых получается, не знал это, ща загуглил, да действительно так, буду знать хм
Веб разработчик крайне ограничен в стилизации скроллбара.
Повлиять можно только на 3 параметра:
1) Ширина скроллбара;
2) Цвет бегунка (+ hover);
3) Цвет подложки бегунка.
Все остальное поведение зависит от браузера и пользовательских настроек вне контекста песочницы веб-страницы (и даже доступные стилизации могут быть перебиты внешними настройками просто потому что потому).
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы всегда иметь видимую полосу прокрутки в CSS, можно использовать свойство `overflow` с значением `scroll` или `auto`. Это свойство позволяет управлять поведением элемента при переполнении его содержимого.
Пример использования свойства `overflow` с значением `scroll`:
.element { overflow: scroll; }
Этот код приведет к тому, что внутри элемента всегда будет отображаться полоса прокрутки, даже если содержимое не переполнено.
Если вы хотите, чтобы полоса прокрутки отображалась только в случае переполнения содержимого, используйте значение `auto`:
.element { overflow: auto; }
Таким образом, полоса прокрутки будет отображаться только тогда, когда содержимое элемента переполнено и требуется прокрутка.
Если вам нужно настроить внешний вид полосы прокрутки, вы можете воспользоваться псевдоэлементами `::-webkit-scrollbar` (для Webkit браузеров) и `::-ms-scrollbar` (для IE) и применить к ним стили, такие как `width`, `height`, `background-color` и другие.
Например, чтобы задать цвет фона полосы прокрутки в Webkit браузерах, используйте следующий код:
.element::-webkit-scrollbar { background-color: #ccc; }
Таким образом, вы можете контролировать отображение полосы прокрутки в вашем веб-приложении и обеспечить удобство пользователей при просмотре контента.