Eu quero poder percorrer a página inteira, mas sem que a barra de rolagem seja mostrada.
No Google Chrome it's:
::-webkit-scrollbar {
display: none;
}
Mas o Mozilla Firefox e o Internet Explorer don'não parecem funcionar assim.
Eu também tentei isto no CSS:
overflow: hidden;
Isso esconde a barra de rolagem, mas eu posso't rolar mais.
Há alguma maneira de remover a barra de rolagem enquanto ainda posso rolar a página inteira?
Apenas com CSS ou HTML, por favor.
Apenas um teste que está a funcionar bem.
#parent{
width: 100%;
height: 100%;
overflow: hidden;
}
#child{
width: 100%;
height: 100%;
overflow-y: scroll;
padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
box-sizing: content-box; /* So the width will be 100% + 17px */
}
[violino de trabalho][1]
Uma vez que a largura da barra de rolagem difere em diferentes navegadores, é melhor manuseá-la com JavaScript. Se você fizer `Element.offsetWidth - Element.clientWidth', a largura exata da barra de rolagem irá aparecer.
[JavaScript Working Fiddle][2]
Utilizando Posição: absoluta
,
#parent{
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
#child{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: -17px; /* Increase/Decrease this value for cross-browser compatibility */
overflow-y: scroll;
}
[violino de trabalho][3]
[**JavaScript Working Fiddle***][4]
Com base nesta resposta, eu criei um simples plugin de rolagem.
Use:
<div style='overflow:hidden; width:500px;'>
<div style='overflow:scroll; width:508px'>
My scroll-able area
</div>
</div>
Este é um truque para sobrepor um pouco a barra de rolagem com um mergulho sobreposto que não tem nenhuma barra de rolagem:
::-webkit-scrollbar {
display: none;
}
Isto é apenas para navegadores WebKit... Ou você pode usar conteúdo CSS específico do navegador (se houver algum no futuro). Cada browser pode ter uma propriedade diferente e específica para as suas respectivas barras.
Para uso com o Microsoft Edge: -ms-overflow-style: -ms-autohiding-scrollbar;
ou -ms-overflow-style: none;
como por MSDN.
Não há equivalente para o Firefox. Embora exista um plugin jQuery para conseguir isto, http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html