Como faço para remover a barra de rolagem horizontal em uma div?


128

Quando defino overflow: scroll, recebo barras de rolagem horizontais e verticais.

Existe uma maneira de remover a barra de rolagem horizontal em uma div?

Respostas:


208
overflow-x: hidden;


Obrigado, você economizou muito tempo. Alguém pode marcar isso como uma resposta aceita plz.
precisa

5
é uma solução ruim. Porque nesse caso, você apenas oculta a rolagem horizontal no contêiner. Mas se esse contêiner for muito amplo, seu conteúdo não caberá nele.
Alex Filatov

38

Não se esqueça de escrever overflow-x: hidden;

O código deve ser:

overflow-y: scroll;
overflow-x: hidden;

21

Com overflow-y: scroll, a barra de rolagem vertical estará sempre lá, mesmo que não seja necessária. Se você deseja que a barra de rolagem y fique visível apenas quando necessário, achei que isso funciona:

.mydivclass {overflow-x: hidden; overflow-y: auto;}

19

CSS

overflow-y: scroll;

Veja no jsFiddle .

Observe que, se você remover o -yda overflow-ypropriedade, a barra de rolagem horizontal será mostrada.


13

Adicione este código ao seu CSS. Desabilitará a barra de rolagem horizontal.

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

10

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

OP precisa de rolagem sem barra de rolagem
T04435 10/01

8

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

8

Para remover a barra de rolagem horizontal, use o seguinte código. Funciona 100%.

html, body {
    overflow-x: hidden;
}


2

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>




-3

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;
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.