Ocultar html horizontal pero no barra de desplazamiento vertical

279

Tengo un área de texto HTML que es de ancho fijo, pero de altura variable. Me gustaría establecer overflow:scrolly poder mostrar una barra de desplazamiento vertical, pero no horizontal. No puedo usarlo overflow:autodebido a otras cosas específicas de mi situación.

Sé que no hay forma de usar CSS2 para mostrar solo barras de desplazamiento verticales pero no horizontales. ¿Hay algo que pueda hacer con JavaScript para ocultar la barra de desplazamiento horizontal?

html css scrollbar William Jones
fuente

3

No, usando CSS2 y overflow:scroll;no hay forma de mostrar una barra y no la otra. Es inherente a overflow:scroll; JavaScript solo puede hacer lo que CSS permite. Sin embargo, supongo que puede usar desbordamiento: automático, simplemente no sabe cómo. ¿Podría elaborar sobre "otras cosas específicas de su situación"?

tloflin

575

Puede usar CSS como este:

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

Nick Craver
fuente

2

Lo veo como CSS3, y no funciona en Firefox cuando lo pruebo. También veo que esto está disponible como una propiedad solo de IE desde hace mucho tiempo.

William Jones

@wiliamjones - Esto funciona en firefox ... ¿tienes una página de ejemplo? Podría ser alguna otra razón de diseño que no funciona.

Nick Craver

@william - Aquí hay un ejemplo completo de su funcionamiento, prueba en firefox :) jsfiddle.net/qpZ8k

Nick Craver

Tienes razón, funciona con Firefox, es la biblioteca de JavaScript Prototype que no es compatible con este atributo, lo cual fue bastante fácil de solucionar. ¿Es esta propiedad generalmente confiable en todos los navegadores?

William Jones el

@williamjones - Sí, generalmente es el caso con estas cosas, los navegadores lo implementan, luego es un estándar más tarde como una ocurrencia tardía.

Nick Craver

30

Usa CSS. Es más fácil y rápido que javascript.

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

Kevin
fuente

22

Deshabilite completamente la barra de desplazamiento horizontal agregando este código.

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

rpalzona
fuente

9

El uso wrap=virtualen los cuadros de formulario HTML elimina la barra de desplazamiento horizontal en la parte inferior del cuadro:

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

Vea el ejemplo aquí: http://jsbin.com/opube3/2 (Probado en FF e IE)

Jitendra Vyas
fuente

2

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

Tirupati Balan
fuente

2

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

Ejemplo de trabajo con fragmento y enlace jsfiddle 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>

Expandir fragmento

Santosh Khalse
fuente

1

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

establece un tamaño de desplazamiento de 200 px, overflow-xoculta cualquier barra de desplazamiento horizontal.

maultrommel
fuente

0

Para mi:

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

Por supuesto quitar las flechas

Onyximo
fuente

Ocultar html horizontal pero no barra de desplazamiento vertical

Respuestas: