CSS menyembunyikan bilah gulir jika tidak diperlukan

436

Saya mencoba mencari tahu bagaimana saya bisa menyembunyikan overflow-y:scroll;jika tidak diperlukan. Yang saya maksud adalah bahwa saya sedang membangun sebuah situs web dan saya memiliki area utama tempat posting akan ditampilkan dan saya ingin menyembunyikan bilah gulir jika konten tidak melebihi lebar saat ini.

Juga, pertanyaan kedua saya. Saya ingin membuatnya jadi ketika posting melebihi lebar saat ini, lebar akan meningkat secara otomatis dan konten tidak akan keluar dari kotak.

Adakah yang tahu cara melakukan ini?

Area posting:

.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;
}

Wadah situs web utama:

.container {
    margin: 0 auto;
    width: 757px;
    margin-top: 30px;
    text-align: center;
}
html css Thanos Paravantis
sumber
Apakah Anda ingin menyembunyikan bilah gulir vertikal atau horizontal? Bisakah Anda memposting contoh dengan kode html ke, misalnya, jsfiddle.net dan tautkan di sini
RJo
Halo, saya memposting 2 kelas yang saya gunakan. Pada html, hanya memanggil kelas.
Thanos Paravantis

Jawaban:

745

Tetapkan overflow-yproperti ke auto, atau hapus properti secara keseluruhan jika tidak diwariskan.

RJo
sumber
Saya bisa tetapi saya butuh bantuan dengan pertanyaan kedua saya juga, tentang lebarnya, otomatis bertambah.
Thanos Paravantis
Anda selalu dapat mencoba menggunakan pencarian stackoverflow
RJo
Di mana gulir dalam contoh Anda?
Hijau
13
Sementara pengaturan overflow-y: autodiselesaikan masalah saya - tautannya tidak benar-benar menunjukkan contoh ini ...
Shadow
2
Harus diperhatikan overflow-x: autojuga berfungsi untuk menyembunyikan scrollbar horizontal.
Edward D'Souza
40

Kamu bisa menggunakan overflow:auto;

Anda juga dapat mengontrol sumbu x atau y secara individual dengan properti overflow-xdan overflow-y.

Contoh:

.content {overflow:auto;}
.content {overflow-y:auto;}
.content {overflow-x:auto;}
Ayyappan K
sumber
20
Meskipun kami berterima kasih atas jawaban Anda, akan lebih baik jika memberikan nilai tambahan di atas jawaban lainnya. Dalam hal ini, jawaban Anda tidak memberikan nilai tambahan, karena pengguna lain sudah memposting solusi itu. Jika jawaban sebelumnya bermanfaat bagi Anda, Anda harus memilihnya alih-alih mengulangi informasi yang sama.
Toby Speight
9

Anda dapat menggunakan .content dan .container untuk meluap: otomatis. Berarti jika teksnya terlampaui secara otomatis gulir akan datang sumbu x dan sumbu y. (tidak perlu memberikan sumbu x terpisah dan sumbu y umumnya memberi overflow: otomatis)

.content {overflow: auto;}

Ayyappan K
sumber
5 
.selected-elementClass{
    overflow-y:auto;
}
Prateek Arora
sumber
1

.container {overflow: auto;} akan melakukan trik. Jika Anda ingin mengontrol arah tertentu, Anda harus mengatur otomatis untuk sumbu tertentu itu. AE

.container {overflow-y: auto;} .container {overflow-x: hidden;}

Kode di atas akan menyembunyikan limpahan apa pun pada sumbu x dan menghasilkan bilah gulir saat diperlukan pada sumbu y.Tapi Anda harus memastikan bahwa tinggi konten default Anda lebih kecil daripada tinggi kontainer; jika tidak, bilah gulir tidak akan disembunyikan.

Neero
sumber