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?
<textarea style="overflow:hidden"></textarea>
?Respuestas:
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 laresize
propiedad CSS aquífuente
style="overflow: hidden"
ystyle="resize: none"
fueron los que hicieron el truco.fuente
Para MS IE 10, probablemente encontrará que necesita hacer lo siguiente:
-ms-overflow-style: none
Vea lo siguiente:
https://msdn.microsoft.com/en-us/library/hh771902(v=vs.85).aspx
fuente
Dar una clase por ejemplo:
scroll
a 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
fuente
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/
fuente
Pude deshacerme de mi barra de desplazamiento en el cuerpo del texto eliminando mi atributo de altura máxima de mi clase.
fuente