Supprimer les barres de défilement de textarea

Question

En suivant ma question précédente (Ajouter une barre de défilement à un </a>) sur la manière de toujours voir la barre de défilement dans un <code><textarea></code>, je me demande maintenant comment vous pourriez le configurer pour qu'il n'y ait pas de barre de défilement dans le <code><textarea></code>, même lorsque le texte dépasse. Pour faire défiler vers le bas, vous utiliseriez les touches fléchées ou la souris pour naviguer à travers le texte.</p> <p>Comment puis-je faire cela?</p></x-turndown>

Answer 1

Essayez ce qui suit, je ne suis pas sûr de ce qui fonctionnera pour tous les navigateurs ou le navigateur avec lequel vous travaillez, mais il serait préférable d'essayer tout :

Ou

...Comme suggéré ci-dessus

Vous pouvez également essayer d'ajouter ceci, je ne l'ai jamais utilisé auparavant, je l'ai juste vu publié sur un site aujourd'hui :

Cette dernière option supprimerait la possibilité de redimensionner le textarea. Vous pouvez trouver plus d'informations sur la propriété CSS resize ici

Answer 2

style="overflow: hidden" et style="resize: none" ont été ceux qui ont fait l'affaire.

Answer 3

Donnez une classe par exemple : scroll à la balise textarea. Et dans le css ajoutez cette propriété -

.scroll::-webkit-scrollbar {
   display: none;
 }

Cela a fonctionné sans omission de la partie scroll

Answer 4

Pour MS IE 10, vous devrez probablement faire ce qui suit :

-ms-overflow-style: none

Voir ici :

https://msdn.microsoft.com/en-us/library/hh771902(v=vs.85).aspx

Answer 5

Cacher la barre de défilement, mais tout en restant capable de défiler en utilisant du CSS

Pour cacher la barre de défilement, utilisez -webkit- car il est pris en charge par les principaux navigateurs (Google Chrome, Safari ou les nouvelles versions d'Opera). Il existe de nombreuses autres options pour les autres navigateurs qui sont répertoriées ci-dessous:

    -webkit- (Chrome, Safari, nouvelles versions d'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/