Respostas:
overflow-x: hidden;
Não se esqueça de escrever overflow-x: hidden;
O código deve ser:
overflow-y: scroll;
overflow-x: hidden;
overflow-y: scroll;
Observe que, se você remover o -y
da overflow-y
propriedade, a barra de rolagem horizontal será mostrada.
Sem rolagem (sem especificar x ou y):
.your-class {
overflow: hidden;
}
Remova a rolagem horizontal:
.your-class {
overflow-x: hidden;
}
Remova a rolagem vertical:
.your-class {
overflow-y: hidden;
}
Para ocultar a barra de rolagem horizontal, podemos apenas selecionar a barra de rolagem da div desejada e configurá-la como display: none;
Uma coisa a observar é que isso funcionará apenas para navegadores baseados no WebKit (como o Chrome), pois não existe essa opção disponível para o Mozilla.
Para selecionar a barra de rolagem, use ::-webkit-scrollbar
Portanto, o código final será assim:
div::-webkit-scrollbar {
display: none;
}
Para remover a barra de rolagem horizontal, use o seguinte código. Funciona 100%.
html, body {
overflow-x: hidden;
}
Se você não tem nada transbordando horizontalmente, também pode usar
overflow: auto;
e só mostrará barras de rolagem quando necessário.
Consulte Propriedade CSS Overflow
Usar:
overflow: auto;
Isso mostrará a barra de rolagem vertical e somente se houver um estouro vertical, caso contrário, ela ficará oculta.
Se você tiver um excesso de xey, as barras de rolagem xey serão mostradas.
Para ocultar a barra de rolagem x (horizontal), mesmo se presente, adicione:
overflow-x: hidden;
body {
font-family: sans-serif;
}
.nowrap {
white-space: nowrap;
}
.container {
height: 200px;
width: 300px;
padding 10px;
border: 1px solid #444;
overflow: auto;
overflow-x: hidden;
}
<div class="container">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li class="nowrap">Item 8 and some really long text to make it overflow horizontally.</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
<li>Item 13</li>
<li>Item 14</li>
<li>Item 15</li>
<li>Item 16</li>
<li>Item 17</li>
</ul>
</div>
Para esconder o scrollbar
, mas manter o comportamento.
div::-webkit-scrollbar {
width: 0px;
background: transparent;
}
Existem limitações para isso.
Use este pedaço de código ..
.card::-webkit-scrollbar {
display: none;
}
Eu estava tendo problemas em que estava usando
overflow: none;
Mas eu sabia que o CSS não gostava muito e não funcionava 100% da maneira que eu queria.
No entanto, esta é uma solução perfeita, pois nenhum dos meus conteúdos deve ser maior do que o pretendido e isso corrigiu o problema que eu tinha.
overflow: auto;