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

Question

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

Answer 1

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

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

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

html {
    overflow-y:scroll;
}

Answer 2

html {
    overflow-y: scroll;
}

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

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

Answer 3

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

Это то, что вам нужно исправить:

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

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

Answer 4

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

Answer 5

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

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

body { min-height:101%; }

Answer 6

html {height: 101%;}

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

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

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

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

Answer 7

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

html { width: 100vw; }

Answer 8

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

body {
    overflow-y: scroll;
}

Answer 9

Добавьте этот код в таблицу стилей CSS:

html {overflow-y: scroll;}

Вот и все!

Answer 10

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