2017-11-28 25 views
0

私は、クリック可能ではないと表示される垂直スクロールバーを持っています。垂直スクロールバーは表示されますが、バーは無効になっているようです。Html垂直スクロールバーが有効になっていませんか?

<textarea id="mytextarea" rows="10" style="white-space: pre-wrap; width:99%; overflow-y:scroll; overflow-x:hidden; vertical-align:middle;"></textarea> 

EDIT:私はテキスト領域の

それに接続されている:私は私のスクリプト内の別のdivは「絶対位置」を持っていることがわかりました。これをrelativeに変更すると、yスクロールバーがクリック可能になります。なぜこの位置:スクロールバーに絶対的な影響を与えるのだろうか?

垂直スクロールバーを明示的に有効にする方法はありますか?

+0

これをフィーリングに貼り付けるhttps://jsfiddle.net/741232t2/ – IrkenInvader

+0

Textareaのコンテンツが10行の長さを増やすとスクロールが有効になります – Shaybi

答えて

4

overflow-y: scroll;があるため、縦のバーが表示されるこのプロパティは、特にバーを常に表示します。無効に見えるのは、テキスト領域にスクロール可能にするための十分なコンテンツがないからです。

テキストボックスの高さ以上のコンテンツを追加すると、バーがスクロール可能になります。

ここにはたくさんのテキストが含まれています。スクロールできることがわかります。そのテキストをすべて削除すると、無効になります。

https://jsfiddle.net/741232t2/1/

あなたがバーを使用すると、スクロールすることができた場合にのみ表示させたい場合は、あなたがoverflow-y: auto;

この次のフィドルはoverflow-y: auto;があり、そこにすべてのテキストを削除した場合、あなたがいることがわかりますをしたいですバーも消えます。 overflow: auto;

https://jsfiddle.net/741232t2/2/

は、私はしかし、あなたがこのような代わりに、2の単一オーバーフローコールを使用することを示唆しています。それはあなたが望む仕事をするでしょう。要素の

<textarea id="mytextarea" rows="10" style="white-space: pre-wrap; width:99%; overflow:auto; vertical-align:middle;">/textarea> 

https://jsfiddle.net/741232t2/3/

1

CSSのスクロールバーがオーバーフローです:自動;

これはあなたのコードです:

<textarea id="mytextarea" rows="10" style="white-space: pre-wrap; width:99%; overflow-y:scroll; overflow-x:hidden; vertical-align:middle;"></textarea> 

使用コンテンツオーバーフロー時に、この自動的に要素のスクロールを作るために:

<textarea id="mytextarea" rows="10" style="white-space: pre-wrap; width:99%; overflow:auto; vertical-align:middle;"></textarea> 

これはオーバーフロー2時間を呼び出すよりも効率的な方法であります要素レイヤの異なる辺。