So verbergen Sie eine vertikale Bildlaufleiste, wenn sie nicht benötigt wird

Ich habe einen Textbereich, der in einem Div enthalten ist, da ich einen Abfragehinweis habe und die Deckkraft verwenden wollte, ohne den Rand zu ändern. Es gibt eine sichtbare vertikale Bildlaufleiste, die nur angezeigt werden soll, wenn ich in das Textfeld tippe und sie über den Container hinausgeht. Ich habe versucht, überzulaufen: auto; funktioniert aber nicht.

Textfeld:

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

Stile:

#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
quelle

Mögliches Duplikat der CSS-Bildlaufleiste ausblenden, falls nicht erforderlich

— Eren Tantekin

Antworten:

198

overflow: auto(oder overflow-y: auto) ist der richtige Weg.

Das Problem ist, dass Ihr Textbereich größer als Ihr Div ist. Das div schneidet am Ende das Textfeld ab. Auch wenn es so aussieht, als ob es mit dem Scrollen beginnen sollte, wenn der Text größer ist als 159pxes, wird es nicht mit dem Scrollen beginnen, bis der Text größer ist als 400pxdie Höhe des Textfelds.

Versuchen Sie Folgendes : http://jsfiddle.net/G9rfq/1/

Ich habe overflow: auto für das Textfeld festgelegt und das Textfeld auf die gleiche Größe wie das div eingestellt.

Ich glaube auch nicht, dass es gültig ist, ein divInside A zu haben label, der Browser wird es rendern, aber es könnte dazu führen, dass etwas Funky passiert. Auch dein divist nicht geschlossen.

— Davy8
quelle

So funktioniert diese Lösung, wenn wir die Bildlaufleiste mit dem Pseudoelement -webkit-scrollbar angepasst haben. ? denn wenn der Überlauf automatisch funktioniert, funktionieren Pseudo-Elemente nicht .... Ich möchte meine Bildlaufleiste anpassen und dann ausblenden, wenn sie nicht benötigt wird?

— Kpatel1989

overflow: auto;oder overflow: hidden;sollte es tun, denke ich.

— Boris Bachovski
quelle

Wie ich in meiner Frage gesagt habe Überlauf: auto; funktioniert nicht :(

— Lukus

versteckt versteckt die Bildlaufleiste, aber sobald der Text das Div passiert, wird die Bildlaufleiste nicht angezeigt, sodass nicht nach unten

— gescrollt werden

Ich habe es gerade getestet und es funktioniert gut. Welchen Browser verwenden Sie?

— Boris Bachovski

Ich benutze Firefox, aber in IE versteckt zeigt die Bildlaufleiste, egal ob Text div passiert und mit Auto, sobald es den DIV-Container passiert, wird die Bildlaufleiste nicht angezeigt

— Lukus

Versuchen Sie, position: relative;die#name div

— Boris Bachovski

Fügen Sie diese Klasse in die CSS-Klasse ein

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

und benutze die Klasse in div. wie hier.

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

Ich habe ein Bild angehängt, Sie sehen die Ausgabe des obigen Codes Geben Sie hier die Bildbeschreibung ein

— Draufgänger
quelle