web-dev-qa-db-fra.com

comment masquer une barre de défilement verticale lorsque vous n'en avez pas besoin

J'ai une textarea qui est contenue dans une div car j'ai jQuery allusion et je voulais utiliser l'opacité sans changer la bordure. Il y a une barre de défilement verticale visible indiquant comment je souhaite que ceci ne soit affiché que lorsque je tape dans le champ de texte et qu'il 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;
}
htmlcssforms
85
Lukus

overflow: auto (ou overflow-y: auto) est la bonne façon de faire.

Le problème est que votre zone de texte est plus grande que votre div. La 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 que 159px le défilement ne commence pas tant que le texte n’est pas plus grand que 400px qui est la hauteur de la zone de texte.

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

J'ai défini overflow: auto sur la zone de texte et lui ai donné la même taille que la div.

De plus, je ne crois pas qu'il soit valide d'avoir un div dans un label, le navigateur le rendra, mais cela pourrait provoquer des problèmes géniaux. De plus, votre div n'est pas fermé.

171
Davy8

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

4
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 utiliser 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 enter image description here

1
DareDevil