Главные полосы прокрутки всегда видны

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

152
css html xhtml

10 ответов

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

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

Update: если выше не работает, только через это может. 

html {
    overflow-y:scroll;
}
285
html {
    overflow-y: scroll;
}

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

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

23

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

18

убедитесь, что overflow имеет значение "scroll", а не " auto."С, в OS X Lion, overflow set to "scroll" ведет себя больше как 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);
}

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

17
html {height: 101%;}

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

Это всегда показывать активную вертикальную полосу прокрутки на каждой странице вертикальная полоса прокрутки будет прокручиваться только из нескольких пикселей.

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

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

10

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

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

body { min-height:101%; }
10

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

html { width: 100vw; }
2

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

body {
    overflow-y: scroll;
}
1

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

html {overflow-y: scroll;}

вот и все !

1

установка высоты до 101% - это мое решение проблемы. Страницы больше не будут "щелкать" при переключении между теми, которые превышают высоту окна просмотра, и теми, которые этого не делают.

0