it-swarm.com.ru

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

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

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

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

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

html {
    overflow-y:scroll;
}
306
Corv1nus
html {
    overflow-y: scroll;
}

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

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

24
Ionuț G. Stan

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

22
Frank Lämmer

Убедитесь, что для переполнения установлено значение "прокрутка", а не "авто". С учетом вышесказанного в OS X Lion переполнение, установленное на "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);
}

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

21
molls223

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

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

body { min-height:101%; }
12
Scott
html {height: 101%;}

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

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

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

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

11
Marco Demaio

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

html { width: 100vw; }
2
lunelson

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

body {
    overflow-y: scroll;
}
2
Jazzepi

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

0
Sanjaal Corps

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

html {overflow-y: scroll;}

Это все, что нужно сделать!

0
iCrazybest