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

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

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

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

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

html {
    overflow-y:scroll;
}

Убедитесь, что для переполнения установлено значение «прокрутка», а не «авто». С этим сказал , в 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);
}

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

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

html {
    overflow-y: scroll;
}

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

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

html {height: 101%;}

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

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

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

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

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

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

body { min-height:101%; }

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

body {
    overflow-y: scroll;
}

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

html { width: 100vw; }

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

body { 
    min-height: 101vh; 
} 

работает лучше для меня

Я сделаю это:

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

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