Quitar barras de desplazamiento del área de texto

82

Siguiendo con mi pregunta anterior ( Agregar una barra de desplazamiento a un <textarea> ) sobre cómo ver siempre la barra de desplazamiento en a <textarea>, ahora me pregunto cómo la configuraría para que no haya barra de desplazamiento en el <textarea>, incluso cuando el texto se desborde. Para desplazarse hacia abajo con esto, usaría las teclas de flecha o el mouse para navegar por el texto.

¿Cómo puedo hacer esto?

usuario2370460
fuente
4
Lo intentaste <textarea style="overflow:hidden"></textarea>?
andyb

Respuestas:

136

Intente lo siguiente, no estoy seguro de cuál funcionará para todos los navegadores o para el navegador con el que está trabajando, pero sería mejor probar todos:

<textarea style="overflow:auto"></textarea>

O

<textarea style="overflow:hidden"></textarea>

... Como se sugirió anteriormente

También puede intentar agregar esto, nunca lo usé antes, solo lo vi publicado en un sitio hoy:

<textarea style="resize:none"></textarea>

Esta última opción eliminaría la capacidad de cambiar el tamaño del textarea. Puede encontrar más información sobre la resizepropiedad CSS aquí

tinthetub
fuente
5
textarea_element.style.overflow = "oculto"; (trabajado en Firefox 44.0)
AAAfarmclub
Este enfoque oculta la barra de desplazamiento, pero si su contenido es grande, ya no lo desplaza.
Vano
15

style="overflow: hidden"y style="resize: none"fueron los que hicieron el truco.

Dinder Logic
fuente
13
¿Cómo es exactamente esto no una respuesta?
Robbo
7

Dar una clase por ejemplo: scrolla la etiqueta textarea. Y en el CSS agregue esta propiedad -

.scroll::-webkit-scrollbar {
   display: none;
 }
<textarea class='scroll'></textarea>

Funcionó sin perder la parte de desplazamiento

SATISFACCIÓN NVRN
fuente
6

Ocultar la barra de desplazamiento, pero sin dejar de poder desplazarse con CSS

Para ocultar la barra de desplazamiento utilice -webkit- porque es compatible con los principales navegadores (Google Chrome, Safari o versiones más recientes de Opera). Hay muchas otras opciones para los otros navegadores que se enumeran a continuación:

    -webkit- (Chrome, Safari, newer versions of Opera):
    .element::-webkit-scrollbar { width: 0 !important }
    -moz- (Firefox):
    .element { overflow: -moz-scrollbars-none; }
    -ms- (Internet Explorer +10):
    .element { -ms-overflow-style: none; }

ref: https://www.geeksforgeeks.org/hide-scroll-bar-but- while- still- being- able- to- scroll- using- css/

usuario12472501
fuente
0

Pude deshacerme de mi barra de desplazamiento en el cuerpo del texto eliminando mi atributo de altura máxima de mi clase.

SauerTrout
fuente