web-dev-qa-db-ja.com

不要なときに垂直スクロールバーを非表示にする方法

Jqueryヒントがあり、境界線を変更せずに不透明度を使用したいので、divに含まれるtextareaがあります。テキストフィールドに入力しているときにのみ表示する垂直スクロールバーがあり、コンテナーを超えています。オーバーフローを試みました：auto;しかし、動作しません。

テキストフィールド：

<label>
    <div id="name">
        <textarea name="message" type="text" id="message"
            title="Enter Message Here"
            rows=9 cols=60 maxlength="2000"></textarea>
    </div>
</label>

スタイル：

#name { 
    border: 1px solid #c810ca;
    width: 270px;
    height:159px;
    overflow: hidden; 
    position: relative;
    }

#message {
    height: 400px;
    width: 235px;
    overflow: hidden;
    position: absolute;
}
htmlcssforms
85
Lukus

overflow: auto（またはoverflow-y: auto）が正しい方法です。

問題は、テキスト領域がdivよりも高いことです。 divはテキストボックスを切り捨てるので、テキストが159pxよりも高いときにスクロールを開始するように見えても、テキストが400pxよりも高くなるまでスクロールを開始しません。テキストボックスの高さ。

これを試してください： http://jsfiddle.net/G9rfq/1/

テキストボックスにoverflow：autoを設定し、テキストボックスをdivと同じサイズにしました。

また、div内にlabelを含めることは有効ではないと思いますが、ブラウザはそれをレンダリングしますが、ファンキーなことが起こる可能性があります。また、divは閉じられていません。

171
Davy8

overflow: auto;またはoverflow: hidden;はそれを行うべきだと思います。

4
Boris Bachovski

このクラスを.cssクラスに追加します

.scrol  { 
font: bold 14px Arial; 
border:1px solid black; 
width:100% ; 
color:#616D7E; 
height:20px; 
overflow:scroll; 
overflow-y:scroll;
overflow-x:hidden;
}

divのクラスを使用します。ここみたいに。

<div> <p class = "scrol" id = "title">-</p></div>

私は画像を添付しました、あなたは上記のコードの出力を見る enter image description here

1
DareDevil