Barra de rolagem oculta CSS, se não for necessário

435

Estou tentando descobrir como esconder o overflow-y:scroll;que não é necessário. O que quero dizer é que estou construindo um site e tenho uma área principal em que as postagens serão exibidas e quero ocultar a barra de rolagem se o conteúdo não exceder a largura atual.

Além disso, minha segunda pergunta. Quero fazer isso quando as postagens excederem a largura atual, a largura aumentará automaticamente e o conteúdo não sairá da caixa.

Alguém tem idéia de como fazer isso?

Área de publicações:

.content {
    height: 600px;
    border-left: 1px solid;
    border-right: 1px solid;
    border-bottom: 1px solid;
    font-size: 15px;
    text-align: justify;
    line-height: 19px;
    overflow-y:scroll;
}

Contêiner do site principal:

.container {
    margin: 0 auto;
    width: 757px;
    margin-top: 30px;
    text-align: center;
}

html css

— Thanos Paravantis
fonte

Deseja ocultar a barra de rolagem vertical ou horizontal? Você pode postar o exemplo com código html para, por exemplo, jsfiddle.net e vinculá-lo aqui

— RJO

Olá, eu publiquei as 2 classes que estou usando. No html, nada além de chamar classes.

— Thanos Paravantis

741

Defina a overflow-ypropriedade como autoou remova a propriedade completamente, se não for herdada.

— RJo
fonte

Eu poderia, mas preciso de ajuda também com a minha segunda pergunta, sobre a largura, aumentando automaticamente.

— Thanos Paravantis

Você sempre pode tentar usar a pesquisa stackoverflow

— RJo

Onde está a rolagem em seus exemplos?

— Verde

13

Enquanto definia o overflow-y: automeu problema resolvido - o link não mostra realmente um exemplo disso ...

— Shadow

2

Observe que overflow-x: autotambém funciona para ocultar barras de rolagem horizontais.

— Edward D'Souza

40

Você pode usar overflow:auto;

Você também pode controlar o eixo x ou y individualmente com as propriedades overflow-xe overflow-y.

Exemplo:

.content {overflow:auto;}
.content {overflow-y:auto;}
.content {overflow-x:auto;}

— Ayyappan K
fonte

20

Apesar de agradecermos sua resposta, seria melhor se ela fornecesse valor adicional além das outras respostas. Nesse caso, sua resposta não fornece valor adicional, pois outro usuário já postou essa solução. Se uma resposta anterior foi útil para você, vote em vez de repetir a mesma informação.

— precisa

9

Você pode usar .content e .container para estourar: auto. Significa que se o texto for excedido automaticamente, a rolagem virá do eixo xe do eixo y. (não é necessário especificar o eixo xe o eixo y em geral, o excesso é excedido: automático)

.content {overflow: auto;}

— Ayyappan K
fonte

5

.selected-elementClass{
    overflow-y:auto;
}

— Prateek Arora
fonte

1

.container {overflow: auto;} fará o truque. Se você deseja controlar a direção específica, defina automaticamente para esse eixo específico. AE

.container {overflow-y: automático;} .container {overflow-x: hidden;}

O código acima oculta qualquer excesso no eixo x e gera uma barra de rolagem quando necessário no eixo y. caso contrário, a barra de rolagem não será ocultada.

— Neero
fonte