Зробити основну смугу прокрутки завжди видимою

Який CSS необхідний, щоб вертикальна панель прокрутки браузера залишалася видимою, коли користувач відвідує веб-сторінку (коли на сторінці недостатньо вмісту, щоб викликати активацію панелі прокрутки)?

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

Це робить смугу прокрутки завжди видимою і активною лише при необхідності.

Оновлення: Якщо вищезгадане не працює, можливо, лише використання цього.

html {
    overflow-y:scroll;
}

Переконайтеся, що для переповнення встановлено значення "прокручування", а не "автоматичне". З урахуванням сказаного , в 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);
}

Ви можете відповідно до цього стилю, якщо вам не подобається за замовчуванням.

Все змінилося за останні роки. Наведені вище відповіді вже не дійсні у всіх випадках. Apple скрізь штовхає зникаючі смуги прокрутки . У Safari, Chrome і навіть Firefox на MacOs (та iOs) відображаються смуги прокрутки лише під час фактичної прокрутки - я не знаю про поточну Windows / IE. Однак існують нестандартні способи стилізації смуг прокрутки на Вебкіті (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;
}

Тоді мені не доведеться дивитись на некрасиву сіру смугу прокрутки, коли це не потрібно.