CSS - Estouro: rolagem; - Sempre mostrar barra de rolagem vertical?

Então, atualmente eu tenho:

#div {
  position: relative;
  height: 510px;
  overflow-y: scroll;
}

No entanto, não acredito que seja óbvio para alguns usuários que haja mais conteúdo lá. Eles poderiam rolar a página sem saber que minha div realmente contém muito mais conteúdo. Eu uso a altura 510px para cortar algum texto e, em algumas páginas, parece que há mais conteúdo, mas isso não funciona para todas elas.

Estou usando um Mac e, no Chrome e Safari, a barra de rolagem vertical será exibida apenas quando o mouse estiver sobre a Div e você rolar ativamente. Existe uma maneira de sempre exibi-lo?

Apenas me deparei com esse problema. O OSx Lion oculta as barras de rolagem enquanto não está em uso, para parecer mais "liso", mas ao mesmo tempo surge o problema que você abordou: às vezes as pessoas não conseguem ver se uma div tem um recurso de rolagem ou não.

A correção: no seu css, inclua -

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}

::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .5);
  box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

/* always show scrollbars */

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}

::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .5);
  box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}


/* css for demo */

#container {
  height: 4em;
  /* shorter than the child */
  overflow-y: scroll;
  /* clip height to 4em and scroll to show the rest */
}

#child {
  height: 12em;
  /* taller than the parent to force scrolling */
}


/* === ignore stuff below, it's just to help with the visual. === */

#container {
  background-color: #ffc;
}

#child {
  margin: 30px;
  background-color: #eee;
  text-align: center;
}

<div id="container">
  <div id="child">Example</div>
</div>

personalize a aparência conforme necessário. Fonte

Observe que no iPad Safari, a solução da NoviceCoding não funcionará se você tiver - webkit-overflow-scrolling: touch;em algum lugar do seu CSS. A solução é remover todas as ocorrências -webkit-overflow-scrolling: touch;ou colocar -webkit-overflow-scrolling: auto;a solução da NoviceCoding.

Isso funcionará com o iPad no Safari no iOS 7.1.x dos meus testes, embora não tenha certeza do iOS 6. No entanto, não funcionará no Firefox. Existe um plugin jQuery que visa ser compatível com vários navegadores, chamado jScrollPane .

Além disso, há um post duplicado aqui no Stack Overflow, que tem outros detalhes.

Isso fará com que as barras de rolagem sejam sempre exibidas quando houver conteúdo nas janelas que deva ser rolado para acessar; isso se aplica a todas as janelas e todos os aplicativos no Mac:

Inicie as Preferências do sistema no menu Apple Clique no painel de configurações “Geral”. Procure 'Mostrar barras de rolagem' e selecione a caixa de opções ao lado de 'Sempre'. Feche as Preferências do sistema quando terminar.