Сделать главную полосу прокрутки всегда видимой


179

Какой CSS требуется для того, чтобы вертикальная полоса прокрутки браузера оставалась видимой, когда пользователь посещает веб-страницу (когда на странице недостаточно содержимого для запуска активации полосы прокрутки)?


1
Для предотвращения появления полос прокрутки в Windows есть лучшее решение .
Джош Хабдас

Ответы:


333
html {
    overflow: -moz-scrollbars-vertical; 
    overflow-y: scroll;
}

Это делает полосу прокрутки всегда видимой и активной только при необходимости.

Обновление: если вышеупомянутое не работает, просто используя это, возможно.

html {
    overflow-y:scroll;
}

3
Ты хоть представляешь, какая версия FF принесла поддержку overflow-y? Похоже, что -moz-scrollbars-verticalэто не рекомендуется в пользу overflow-yимущества.
Ionuț G. Stan

Я думаю, что Internet Explorer 6.x +, Firefox 1.5+, если я правильно помню. Я использовал приведенный выше код, и он работает в FF1.5-3.5.1 и IE6-8 для меня.
Corv1nus

2
Существуют ли альтернативы «переходу по страницам», когда некоторые страницы на вашем сайте слишком малы, чтобы иметь полосу прокрутки, а другие - нет? Или это «лучшая практика»? Я должен признать, я не вижу много страниц в сети, которые не занимают всю страницу.
Джесс

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

1
Для тех (как я), которые находят стиль htmlнемного хакерским , обратите внимание, что вы можете использовать структурный псевдоселектор :rootвместо html. См .: developer.mozilla.org/en-US/docs/Web/CSS/:root
Рунин

31

Убедитесь, что для переполнения установлено значение «прокрутка», а не «авто». С этим сказал , в OS X Lion переполнение, установленное на «прокрутку», ведет себя больше как auto в том смысле, что полосы прокрутки все равно будут отображаться только при использовании. Так что, если какие-либо решения выше, похоже, не работают, может быть, поэтому.

Вот что вам нужно, чтобы это исправить:

::-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);
}

Вы можете стилизовать его соответственно, если вам не нравится стиль по умолчанию.


1
Эта вещь работает! Но как вы можете сделать это только на конкретном div?
Богатый

@Rich, как и любой другой элемент CSS. .yourdiv :: - webkit-scrollbar {...}
Крис

@ Крис Привет, спасибо за ответ, вот пример этого. stackoverflow.com/a/54667091/2637261
Rich

Почему это используется-webkit-appearance: none;
Suraj Jain

Это круто! Должен быть принятый ответ.
Киберпанкер

25

Вещи изменились в последние годы. Ответы выше не действительны во всех случаях. Apple подталкивает исчезающие полосы прокрутки повсюду. Safari, Chrome и даже Firefox на MacO (и iO) показывают только полосы прокрутки при фактической прокрутке - я не знаю о текущей Windows / IE. Однако в Webkit есть нестандартные способы стилизации полос прокрутки (IE давно это не использовал).


но это грациозно ухудшает права на эти новые?
Бен

3
Спасибо за этот отличный пункт на исчезающих полосах прокрутки. Для меня причина, чтобы держать полосу прокрутки видимой, состояла в том, чтобы избежать этого небольшого, но очень заметного и очень раздражающего рывка, поскольку содержание изменяется от прокрутки к не С исчезающими полосами прокрутки, они не дергают тело, когда показывают и прячутся, так что это нормально для меня. Но спасибо за этот отличный момент.
Noitidart

4
С точки зрения UX, в большинстве случаев мы хотим видеть полосу прокрутки. В соответствии с текущим трендом, если полоса прокрутки не видна, это дополнительный шаг, чтобы «попробовать» видимый список, чтобы узнать больше в списке. Дополнительная визуальная подсказка о том, что выпадающий список или список содержит больше элементов, не нужна, если люди видят полосу прокрутки.
windsurf88

24
html {
    overflow-y: scroll;
}

Это то, что вы хотите?

К сожалению, Opera 9.64, похоже, игнорирует это объявление CSS применительно к HTMLили BODY, хотя оно работает и для других элементов уровня блока, таких как DIV.


13
html {height: 101%;}

Я использую это решение для разных браузеров (примечание: я всегда использую объявление DOCTYPE в 1-й строке, я не знаю, работает ли оно в режиме quirksmode, никогда не проверял его ).

Это всегда будет показывать АКТИВНУЮ вертикальную полосу прокрутки на каждой странице, вертикальная полоса прокрутки будет прокручиваться только из нескольких пикселей.

Когда содержимое страницы меньше видимой области браузера (порт просмотра), вы все равно увидите активную вертикальную полосу прокрутки, и она будет прокручиваться только на несколько пикселей.

В случае, если вы одержимы проверкой CSS (я одержим только проверкой HTML), используя это решение, ваш код CSS также будет проверяться для W3C, потому что вы не используете нестандартные атрибуты CSS, такие как -moz-scrollbars-vertical


1
Элегантное решение
Артур Кейан

12

body { height:101%; } будет "обрезать" большие страницы.

Вместо этого я использую:

body { min-height:101%; }

1
Этот вопрос был задан 5 лет назад, и на него уже есть принятый ответ. Ваш ответ не дает лучшего ответа, чем уже принятый ответ.
Дипен Шах

18
Этот ответ действительно предоставляет дополнительную информацию, не предоставленную в других ответах.
GaTechThomas

2

Я смог заставить это работать, добавив его в тег body. Было лучше для меня, потому что у меня нет ничего по элементу HTML.

body {
    overflow-y: scroll;
}

2

Альтернативный подход - установить ширину HTML-элемента в 100vw. Во многих, если не в большинстве браузеров, это сводит на нет влияние полос прокрутки на ширину.

html { width: 100vw; }

0

Установка высоты до 101% - это мое решение проблемы. Ваши страницы больше не будут «мерцать» при переключении между теми, которые превышают высоту области просмотра, и теми, которые не имеют.



0

Я сделаю это:

html {
    margin-left: calc(100vw - 100%);
    margin-right: 0;
}

Тогда мне не нужно смотреть на некрасивую полосу прокрутки, когда она не нужна.


Вопрос требует, чтобы он всегда был виден.
Corv1nus
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.