textareaからスクロールバーを削除します


85

スクロールバーを常に表示する方法に関する前の質問(<textarea>にスクロールバーを追加)に続いて、テキストがオーバーフローした場合でも<textarea><textarea>にスクロールバーがないように設定する方法を考えています。これで下にスクロールするには、矢印キーまたはマウスを使用してテキスト内を移動します。

これどうやってするの?


4
やってみました<textarea style="overflow:hidden"></textarea>か?
andyb 2013年

回答:


141

次のことを試してください。すべてのブラウザまたは使用しているブラウザでどちらが機能するかはわかりませんが、すべてを試すのが最善です。

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

または

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

...上記のように

これを追加してみることもできます。これまで使用したことはなく、今日サイトに投稿されたのを見ただけです。

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

この最後のオプションは、のサイズを変更する機能を削除しますtextarea。CSSresizeプロパティの詳細については、こちらをご覧ください


5
textarea_element.style.overflow = "hidden"; (Firefox 44.0で動作)
AAAfarmclub 2016

このアプローチではスクロールバーが非表示になりますが、コンテンツが大きい場合はスクロールしなくなります。
VANO


17

style="overflow: hidden"そしてstyle="resize: none"、そのトリックをしたのは彼らでした。


13
これはどのくらい正確に答えではありませんか?
ロボ2015


7

たとえば:のクラスをscrolltextareaタグに指定します。そして、cssにこのプロパティを追加します-

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

スクロール部分を逃さずに動作しました


6

スクロールバーを非表示にしますが、CSSを使用してスクロールすることはできます

スクロールバーを非表示にするには、主要なブラウザ(Google Chrome、Safari、または新しいバージョンのOpera)でサポートされているため、-webkit-を使用します。以下にリストされている他のブラウザには、他にも多くのオプションがあります。

    -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; }

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


0

クラスのmax-height属性を削除することで、テキスト本文のスクロールバーを取り除くことができました。


0

Mozillaのスクロールバーを非表示にします。

  overflow: -moz-hidden-unscrollable;
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.