comment masquer une barre de défilement verticale lorsqu'elle n'est pas nécessaire

J'ai un textarea qui est contenu dans un div car j'ai un indice jquery et je voulais utiliser l'opacité sans changer la bordure. Il y a une barre de défilement verticale visible comme je veux que cela ne s'affiche que lorsque je tape dans le champ de texte et que cela dépasse le conteneur. J'ai essayé le débordement: auto; mais ne fonctionne pas.

Champ de texte:

<label>
    <div id="name">
        <textarea name="message" type="text" id="message"
            title="Enter Message Here"
            rows=9 cols=60 maxlength="2000"></textarea>
    </div>
</label>

Modes:

#name { 
    border: 1px solid #c810ca;
    width: 270px;
    height:159px;
    overflow: hidden; 
    position: relative;
    }

#message {
    height: 400px;
    width: 235px;
    overflow: hidden;
    position: absolute;
}

html css forms

— Lukus
source

— Copie

Réponses:

199

overflow: auto(ou overflow-y: auto) est la bonne voie à suivre.

Le problème est que votre zone de texte est plus grande que votre div. Le div finit par couper la zone de texte, donc même s'il semble qu'il devrait commencer à défiler lorsque le texte est plus grand, 159pxil ne commencera pas à défiler tant que le texte n'est pas plus grand que 400pxla hauteur de la zone de texte.

Essayez ceci: http://jsfiddle.net/G9rfq/1/

J'ai mis overflow: auto sur la zone de texte et ai fait la zone de texte de la même taille que le div.

De plus, je ne pense pas qu'il soit valide d'avoir un divinside a label, le navigateur le rendra, mais cela pourrait provoquer des trucs géniaux. De plus, votre divn'est pas fermé.

— Davy8
source

Comment faire fonctionner cette solution lorsque nous avons personnalisé la barre de défilement à l'aide de l'élément -webkit-scrollbar psuedo. ? parce que si le débordement est des éléments automatiques de psuedo ne fonctionnent pas .... Je veux personnaliser ma barre de défilement ainsi que masquer alors quand pas nécessaire?

— Kpatel1989

overflow: auto;ou overflow: hidden;devrait le faire je pense.

— Boris Bachovski
source

Comme je l'ai dit dans ma question débordement: auto; ne fonctionne pas :(

— Lukus

hidden masque la barre de défilement mais une fois que le texte passe la div, il n'affiche pas la barre de défilement et ne peut donc pas faire défiler vers le bas pour voir le reste du texte

— Lukus

Je viens de le tester et cela fonctionne très bien. Quel navigateur utilisez-vous?

— Boris Bachovski

J'utilise firefox mais dans IE hidden montre la barre de défilement, peu importe si le texte passe div et avec auto une fois qu'il passe le conteneur DIV, la barre de défilement ne s'affiche pas

— Lukus

Essayez d'ajouter position: relative;le#name div

— Boris Bachovski

Ajouter cette classe dans la classe .css

.scrol  { 
font: bold 14px Arial; 
border:1px solid black; 
width:100% ; 
color:#616D7E; 
height:20px; 
overflow:scroll; 
overflow-y:scroll;
overflow-x:hidden;
}

et utilisez la classe dans div. comme ici.

<div> <p class = "scrol" id = "title">-</p></div>

J'ai joint l'image, vous voyez la sortie du code ci-dessus entrez la description de l'image ici

— DareDevil
source