HTML: Bagaimana cara membuat DIV dengan hanya scroll bar vertikal untuk paragraf panjang?

139

Saya ingin menunjukkan catatan syarat dan ketentuan di situs web saya. Saya tidak ingin menggunakan bidang teks dan juga tidak ingin menggunakan seluruh halaman saya. Saya hanya ingin menampilkan teks saya di area yang dipilih dan ingin menggunakan scroll-bar vertikal untuk turun dan membaca semua teks.

Saat ini saya menggunakan kode ini:

<div style="width:10;height:10;overflow:scroll" >
 text text text text text text text text text
 text text text text text text text text text
 text text text text text text text text text
 text text text text text text text text text
 text text text text text text text text text
 text text text text text text text text text
 text text text text text text text text text
 text text text text text text text text text
</div>

Dua Masalah:

  1. Itu tidak memperbaiki lebar dan tinggi dan menyebar sampai semua teks muncul.
  2. Kedua, itu menunjukkan bilah gulir horizontal dan saya tidak ingin menampilkannya.
css html overflow Awan
sumber
Masalah lebar / tinggi diselesaikan dengan "Daniel Vassallo" dan masalah scroll-bar horizontal diselesaikan dengan "janmoesen". Sekarang siapa jawaban yang harus saya terima :) dapatkah saya memilih beberapa;)
Awan

Jawaban:

240

Gunakan overflow-y. Properti ini adalah CSS 3.

janmoesen.dll
sumber
Masalah lebar / tinggi diselesaikan dengan "Daniel Vassallo" dan masalah scroll-bar horizontal diselesaikan dengan "janmoesen". Sekarang siapa jawaban yang harus saya terima :) dapatkah saya memilih beberapa;)
Awan
22
Itu cukup jelas: selalu pilih yang tidak diunggulkan, yaitu: yang memiliki reputasi paling rendah. ;-)
janmoesen
ha ha ha. Tetapi jawaban Anda tidak secara detail pada "Daniel Vassallo" :)
Awan
Saya berjuang untuk "lebih sedikit lebih baik" dan biarkan tautan yang berbicara. Bagaimanapun, pilih saja satu dan semoga akhir pekanmu menyenangkan!
janmoesen
16
Saya percaya standar di sini adalah untuk tidak menjawab pertanyaan dengan tautan "hanya", karena tautan dapat menjadi tidak valid. Anda harus menyertakan informasi yang cukup untuk menjawab pertanyaan secara langsung dalam jawaban Anda, dan kemudian memiliki tautan sebagai referensi.
Jeffrey Harmon
67

untuk menyembunyikan scrollbar horizontal, Anda dapat menyetel overflow-x menjadi tersembunyi, seperti ini:

overflow-x: hidden;
Kornelius
sumber
Saya merasa ini adalah jawaban yang diinginkan penanya ... Anda layak mendapatkan lebih banyak kredit
Ian Wise
52

Anda perlu menentukan widthdan heightdi px:

width: 10px; height: 10px;

Selain itu, Anda dapat menggunakan overflow: auto;untuk mencegah scrollbar horizontal ditampilkan.

Oleh karena itu, Anda mungkin ingin mencoba yang berikut ini:

<div style="width:100px; height:100px; overflow: auto;" >
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
</div>
Daniel Vassallo
sumber
Lebar dan tinggi berfungsi sekarang tetapi scrollbar horizontal masih belum dihapus.
Awan
Masalah lebar / tinggi diselesaikan dengan "Daniel Vassallo" dan masalah scroll-bar horizontal diselesaikan dengan "janmoesen". Sekarang siapa jawaban yang harus saya terima :) dapatkah saya memilih beberapa;)
Awan
19

Terima kasih dulu

Gunakan overflow:autoitu bekerja untuk saya.

bilah gulir horizontal menghilang.

raji
sumber
15

Untuk setiap kasus diatur overflow-xke hiddendan saya lebih suka mengatur max-heightuntuk membatasi perluasan ketinggian div. Kode Anda akan terlihat seperti ini:

overflow-y: scroll;
overflow-x: hidden;
max-height: 450px;
Brane
sumber
13

Untuk menampilkan bilah gulir vertikal di div Anda, Anda perlu menambahkan

height: 100px;   
overflow-y : scroll;

atau

height: 100px; 
overflow-y : auto;
Ricardo Romo
sumber
2
Saya lebih suka menggunakan max-height: 100px;.
Roman
Karena konfigurasi saya, itu heighthilang sehingga tidak menampilkan bilah gulir vertikal, meskipun height:100%;bekerja lebih baik untuk saya.
SharpC
3 
overflow-y : scroll;
overflow-x : hidden;

height bersifat opsional

Amobi Chuks
sumber
2

Anda dapat menggunakan properti overflow 

style="overflow: scroll ;max-height: 250px; width: 50%;"
Sunil Kumar
sumber
2

Saya juga menghadapi masalah yang sama ... coba lakukan ini ... ini berhasil untuk saya

        .scrollBbar 
        {
        position:fixed;
        top:50px;
        bottom:0;
        left:0;
        width:200px;
        overflow-x:hidden;
        overflow-y:auto;
       }
singhkumarhemant
sumber
1

Ini campuran saya:

overflow-y: scroll;
height: 13em; // Initial height.
resize: vertical; // Allow user to change the vertical size.
max-height: 31em; // If you want to constrain the max size.
Daniel De León
sumber