HTML yatay değil dikey kaydırma çubuğunu gizle

279

Sabit genişlikte, ancak değişken yükseklikte bir HTML textarea var. overflow:scrollDikey kaydırma çubuğunu ayarlamak ve göstermek istiyorum, ancak yatay bir çubuk göstermiyorum. overflow:autoDurumuma özgü başka şeyler nedeniyle kullanamıyorum .

Sadece dikey fakat yatay kaydırma çubuklarını göstermek için CSS2 kullanmanın bir yolu olmadığını biliyorum. Yatay kaydırma çubuğunu gizlemek için JavaScript ile yapabileceğim bir şey var mı?

html css scrollbar

— William Jones
kaynak

3

Hayır, CSS2 kullanarak ve overflow:scroll;diğerini göstermenin bir çubuğu yok. İçinde doğal overflow:scroll; javascript yalnızca CSS'nin izin verdiği şeyi yapabilir. Ancak, benim tahminim böyle olduğunu edebilirsiniz taşma kullanın: oto, sadece nasıl bilmiyorum. "Durumunuza özgü diğer şeyleri" ele alır mısınız?

— tloflin

575

Şu şekilde css kullanabilirsiniz:

overflow-y: scroll;
overflow-x: hidden;

— Nick Craver
kaynak

2

Bunu CSS3 olarak görüyorum ve test ettiğimde Firefox'ta çalışmıyor. Ayrıca bu gün geri bir IE-sadece özellik olarak kullanılabilir olduğunu görüyorum.

— William Jones

@wiliamjones - Bu firefox'ta çalışıyor ... örnek bir sayfanız var mı? Çalışmaması için başka bir düzen olabilir.

— Nick Craver

@william - İşte bunun tam bir örneği, firefox'ta test edin :) jsfiddle.net/qpZ8k

— Nick Craver

Haklısın, Firefox ile çalışıyor, bu öznitelikle uyumlu olmayan Prototype javascript kütüphanesi, etrafta çalışmak için yeterince kolaydı. Bu özellik genellikle tarayıcılarda güvenilir midir?

— William Jones

@williamjones - Evet, genellikle bu şeyler için geçerlidir, tarayıcılar bunu uygular, daha sonra sonradan düşünülen bir standarttır.

— Nick Craver

30

CSS kullanın. Javascript'ten daha kolay ve hızlı.

overflow-x: hidden;
overflow-y: scroll;

— Kevin
kaynak

22

Bu kodu ekleyerek yatay kaydırma çubuğunu tamamen devre dışı bırakın.

body{
  overflow-x: hidden;
  overflow-y: scroll;
}

— rpalzona
kaynak

9

wrap=virtualHTML form kutularınızda kullanmak , kutunun altındaki yatay kaydırma çubuğundan kurtulur:

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

Buradaki örneğe bakın : http://jsbin.com/opube3/2 (FF ve IE'de test edildi)

— Jitendra Vyas
kaynak

2

<div style="width:100px;height:100px;overflow-x:hidden;overflow-y:auto;background-color:#000000">

— Tirupati Balan
kaynak

2

selector{
 overflow-y: scroll;
 overflow-x: hidden;
}

Snippet ve jsfiddle bağlantısı ile çalışma örneği https://jsfiddle.net/sx8u82xp/3/

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

Snippet'i genişlet

— Santosh Khalse
kaynak

1

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

200 piksellik overflow-xkaydırma boyutunu ayarlar, yatay kaydırma çubuğunu gizler.

— maultrommel
kaynak

0

Benim için:

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

Tabii ki okları kaldırın

— Onyximo
kaynak