Sembunyikan html horizontal tetapi bukan scrollbar vertikal

279

Saya memiliki textarea HTML yang lebar tetap, tetapi tinggi variabel. Saya ingin mengatur overflow:scrolldan dapat menampilkan scrollbar vertikal, tetapi tidak horisontal. Saya tidak dapat menggunakan overflow:autokarena hal-hal lain yang khusus untuk situasi saya.

Saya tahu tidak ada cara menggunakan CSS2 untuk hanya menampilkan scrollbar vertikal tetapi tidak horizontal. Apakah ada yang bisa saya lakukan dengan JavaScript untuk menyembunyikan scrollbar horizontal?

html css scrollbar William Jones
sumber
3
Tidak, menggunakan CSS2 dan overflow:scroll;tidak ada cara untuk menunjukkan satu bar dan bukan yang lainnya. Itu melekat dalam overflow:scroll; javascript hanya dapat melakukan apa yang memungkinkan CSS. Namun, tebakan saya adalah Anda dapat menggunakan overflow: otomatis, Anda tidak tahu caranya. Apakah Anda akan menguraikan "hal-hal lain yang khusus untuk situasi Anda"?
tloflin

Jawaban:

575

Anda dapat menggunakan css seperti ini:

overflow-y: scroll;
overflow-x: hidden;
Nick Craver
sumber
2
Saya melihatnya sebagai CSS3, dan itu tidak berfungsi di Firefox ketika saya mengujinya. Saya juga melihat bahwa ini tersedia sebagai properti IE-only dari jalan kembali pada hari itu.
William Jones
@wiliamjones - Ini berfungsi di firefox ... apakah Anda memiliki halaman contoh? Mungkin ada beberapa alasan tata letak lain yang tidak berfungsi.
Nick Craver
@william - Inilah contoh lengkapnya yang berfungsi, tes di firefox :) jsfiddle.net/qpZ8k
Nick Craver
Anda benar, ini berfungsi dengan Firefox, ini adalah perpustakaan javascript Prototipe yang tidak kompatibel dengan atribut ini, yang cukup mudah untuk dikerjakan. Apakah properti ini secara umum dapat diandalkan di seluruh browser?
William Jones
@williamjones - Yup, ini biasanya terjadi dengan hal-hal ini, browser mengimplementasikannya, maka itu standar kemudian sebagai renungan.
Nick Craver
30

Gunakan CSS. Lebih mudah dan lebih cepat daripada javascript.

overflow-x: hidden;
overflow-y: scroll;
Kevin
sumber
22

Nonaktifkan sepenuhnya scrollbar horizontal dengan menambahkan kode ini.

body{
  overflow-x: hidden;
  overflow-y: scroll;
}
rpalzona
sumber
9

Menggunakan wrap=virtualdi kotak formulir HTML Anda menghilangkan bilah gulir horizontal di bagian bawah kotak:

  <textarea name= "enquiry" rows="4" cols="30" wrap="virtual"></textarea>

Lihat contoh di sini: http://jsbin.com/opube3/2 (Diuji pada FF dan IE)

Jitendra Vyas
sumber
2 
<div style="width:100px;height:100px;overflow-x:hidden;overflow-y:auto;background-color:#000000">
Tirupati Balan
sumber
2 
selector{
 overflow-y: scroll;
 overflow-x: hidden;
}

Contoh kerja dengan snippet dan tautan jsfiddle https://jsfiddle.net/sx8u82xp/3/

masukkan deskripsi gambar di sini

.container{
  height:100vh;
  overflow-y:scroll;
  overflow-x: hidden;
  background:yellow;
}
<div class="container">

<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</p>

<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</p>

<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</p>

<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</p>

</div>
Luaskan cuplikan

Santosh Khalse
sumber
1 
.combobox_selector ul {
    padding: 0;
    margin: 0;
    list-style: none;
    border:1px solid #CCC;
    height: 200px;
    overflow: auto;
    overflow-x: hidden;
}

menetapkan ukuran scrolldown 200px, overflow-xmenyembunyikan bilah gulir horizontal apa pun.

Maultrommel
sumber
0

Untuk saya:

.ui-jqgrid .ui-jqgrid-bdiv {
   position: relative;
   margin: 0;
   padding: 0;
   overflow-y: auto;  <------
   overflow-x: hidden; <-----
   text-align: left;
}

Tentu saja menghapus panah

Onyximo
sumber