Masquer la barre de défilement horizontale mais pas verticale html

279

J'ai une zone de texte HTML de largeur fixe, mais de hauteur variable. Je voudrais définir overflow:scrollet pouvoir afficher une barre de défilement verticale, mais pas horizontale. Je ne suis pas en mesure d'utiliser à overflow:autocause d'autres choses spécifiques à ma situation.

Je sais qu'il n'y a aucun moyen d'utiliser CSS2 pour afficher uniquement les barres de défilement verticales mais pas horizontales. Puis-je faire quelque chose avec JavaScript pour masquer la barre de défilement horizontale?

html css scrollbar William Jones
la source
3
Non, en utilisant CSS2 et overflow:scroll;il n'y a aucun moyen d'afficher une barre et pas l'autre. C'est inhérent à overflow:scroll; javascript ne peut faire que ce que CSS permet. Cependant, je suppose que vous pouvez utiliser le débordement: auto, vous ne savez tout simplement pas comment. Pourriez-vous développer les "autres choses spécifiques à votre situation"?
tloflin

Réponses:

575

Vous pouvez utiliser css comme ceci:

overflow-y: scroll;
overflow-x: hidden;
Nick Craver
la source
2
Je vois cela comme CSS3, et cela ne fonctionne pas dans Firefox lorsque je le teste. Je vois également que cela est disponible en tant que propriété IE uniquement depuis bien longtemps.
William Jones
@wiliamjones - Cela fonctionne dans Firefox ... avez-vous une page d'exemple? Cela pourrait être une autre raison de mise en page, cela ne fonctionne pas.
Nick Craver
@william - Voici un exemple complet de son fonctionnement, testez dans firefox :) jsfiddle.net/qpZ8k
Nick Craver
Vous avez raison, cela fonctionne avec Firefox, c'est la bibliothèque javascript Prototype qui n'est pas compatible avec cet attribut, ce qui était assez facile à contourner. Cette propriété est-elle généralement fiable sur tous les navigateurs?
William Jones
@williamjones - Oui, c'est généralement le cas avec ces choses, les navigateurs l'implémentent, puis c'est un standard plus tard après coup.
Nick Craver
30

Utilisez CSS. C'est plus simple et plus rapide que javascript.

overflow-x: hidden;
overflow-y: scroll;
Kevin
la source
22

Désactivez complètement la barre de défilement horizontale en ajoutant ce code.

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

L'utilisation wrap=virtualde vos boîtes de formulaire HTML supprime la barre de défilement horizontale au bas de la boîte:

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

Voir l' exemple ici: http://jsbin.com/opube3/2 (Testé sur FF et IE)

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

Exemple de travail avec extrait de code et lien jsfiddle https://jsfiddle.net/sx8u82xp/3/

entrez la description de l'image ici

.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>
Développer l'extrait

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

définit une taille de défilement de 200 pixels, overflow-xmasque toute barre de défilement horizontale.

maultrommel
la source
0

Pour moi:

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

Bien sûr, enlevez les flèches

Onyximo
la source