Tornando a barra de rolagem principal sempre visível

Qual CSS é necessário para tornar a barra de rolagem vertical do navegador visível quando um usuário visita uma página da Web (quando a página não possui conteúdo suficiente para acionar a ativação da barra de rolagem)?

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

Isso torna a barra de rolagem sempre visível e ativa apenas quando necessário.

Atualização: Se o descrito acima não funcionar, basta usar esta opção.

html {
    overflow-y:scroll;
}

Verifique se o estouro está definido como "rolagem" e não "automático". Dito isto , no OS X Lion, o estouro definido como "scroll" se comporta mais como automático, pois as barras de rolagem ainda serão exibidas apenas quando estiverem sendo usadas. Portanto, se alguma das soluções acima não parecer estar funcionando, talvez seja por isso.

É isso que você precisa para corrigi-lo:

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

Você pode estilizá-lo adequadamente se não gostar do padrão.

As coisas mudaram nos últimos anos. As respostas acima não são mais válidas em todos os casos. A Apple está empurrando barras de rolagem desaparecendo em todos os lugares. Safari, Chrome e até Firefox no MacOs (e iOs) apenas mostram barras de rolagem quando rolam de verdade - eu não sei sobre o Windows / IE atual. No entanto, existem maneiras não padronizadas de estilizar barras de rolagem no Webkit (o IE caiu há muito tempo).

html {
    overflow-y: scroll;
}

É isso que você quer?

Infelizmente, o Opera 9.64 parece ignorar a declaração CSS quando aplicada a HTMLou BODY, embora funcione para outros elementos no nível de bloco DIV.

html {height: 101%;}

Eu uso esta solução entre navegadores (observação: eu sempre uso a declaração DOCTYPE na 1ª linha, não sei se funciona no modo quirksmode, nunca testei ).

Isso sempre mostra uma barra de rolagem vertical ATIVA em todas as páginas; a barra de rolagem vertical será rolável apenas com alguns pixels.

Quando o conteúdo da página é mais curto que a área visível do navegador (porta de visualização), você ainda verá a barra de rolagem vertical ativa e será rolável apenas com alguns pixels.

Caso você esteja obcecado com a validação CSS (sou obcecado apenas com a validação HTML), usando esta solução, seu código CSS também valeria para o W3C porque você não está usando atributos CSS não padrão, como -moz-scrollbars-vertical

body { height:101%; } "recortará" páginas maiores.

Em vez disso, eu uso:

body { min-height:101%; }

Consegui fazer isso funcionar adicionando-o à tag body. Foi melhor para mim porque não tenho nada sobre o elemento html.

body {
    overflow-y: scroll;
}

Uma abordagem alternativa é definir a largura do elemento html para 100vw. Em muitos, se não na maioria dos navegadores, isso nega o efeito das barras de rolagem na largura.

html { width: 100vw; }

Definir altura para 101% é a minha solução para o problema. As suas páginas não serão mais "trocadas" ao alternar entre aquelas que excedem a altura da janela de exibição e as que não o fazem.

body { 
    min-height: 101vh; 
} 

funciona melhor para mim

Eu faço isso:

html {
    margin-left: calc(100vw - 100%);
    margin-right: 0;
}

Então não preciso olhar para a barra de rolagem cinza feia quando ela não é necessária.