cara menyembunyikan bilah gulir vertikal saat tidak diperlukan

95

Saya memiliki textarea yang terkandung dalam div karena saya memiliki petunjuk jquery dan ingin menggunakan opacity tanpa mengubah perbatasan. Ada bilah gulir vertikal yang terlihat bagaimana saya hanya ingin ini ditampilkan ketika saya mengetik di bidang teks dan itu melampaui wadah. Saya telah mencoba overflow: auto; tapi tidak berhasil.

Textfield:

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

Gaya:

#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
sumber
Kemungkinan duplikat CSS menyembunyikan bilah gulir jika tidak diperlukan
Eren Tantekin

Jawaban:

199

overflow: auto(atau overflow-y: auto) adalah cara yang benar untuk pergi.

Masalahnya adalah area teks Anda lebih tinggi dari div Anda. Div akhirnya memotong kotak teks, jadi meskipun sepertinya itu harus mulai menggulir saat teks lebih tinggi daripada 159pxitu tidak akan mulai menggulir sampai teks lebih tinggi dari 400pxyang merupakan tinggi kotak teks.

Coba ini: http://jsfiddle.net/G9rfq/1/

Saya mengatur overflow: auto pada kotak teks, dan membuat kotak teks berukuran sama dengan div.

Juga saya tidak percaya itu valid untuk memiliki bagian divdalam label, browser akan merendernya, tetapi mungkin menyebabkan beberapa hal yang funky terjadi. Anda divjuga tidak ditutup.

Davy8
sumber
Cara membuat solusi ini berfungsi ketika kita telah menyesuaikan scrollbar menggunakan elemen psuedo -webkit-scrollbar. ? karena jika overflow adalah elemen auto psuedo tidak berfungsi .... Saya ingin menyesuaikan scrollbar saya serta menyembunyikannya jika tidak diperlukan?
Kpatel1989
4

overflow: auto;atau overflow: hidden;saya pikir harus melakukannya.

Boris Bachovski
sumber
Seperti yang telah saya katakan dalam pertanyaan saya overflow: auto; tidak bekerja :(
Lukus
tersembunyi menyembunyikan bilah gulir tetapi begitu teks melewati div itu tidak menampilkan bilah gulir sehingga tidak dapat menggulir ke bawah untuk melihat teks lainnya
Lukus
Saya baru saja mengujinya dan berfungsi dengan baik. Browser apa yang Anda gunakan?
Boris Bachovski
saya menggunakan firefox tetapi di IE tersembunyi menunjukkan bilah gulir tidak masalah jika teks melewati div dan dengan otomatis setelah melewati wadah DIV bilah gulir tidak muncul
Lukus
Coba tambahkan position: relative;pada#name div
Boris Bachovski
2

Tambahkan kelas ini di kelas .css

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

dan gunakan kelas di div. seperti di sini.

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

Saya telah melampirkan gambar, Anda melihat keluaran dari kode di atas masukkan deskripsi gambar di sini

Pemberani
sumber