Всегда показывать основную полосу прокрутки

Ответ 1

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

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

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

html {
    overflow-y:scroll;
}

Ответ 2

html {
    overflow-y: scroll;
}

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

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

Ответ 3

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

Ответ 4

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

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

Ответ 5

html {height: 101%;}

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

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

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

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

Ответ 6

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

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

body { min-height:101%; }

Ответ 7

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

html { width: 100vw; }

Ответ 8

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

body {
    overflow-y: scroll;
}

Ответ 9

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

html {overflow-y: scroll;}

Вот и все!

Ответ 10

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