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:

Itu tidak memperbaiki lebar dan tinggi dan menyebar sampai semua teks muncul.
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

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